记录下vscode的代码风格

最近觉得ESLint还不错，但是不想每次都自己手动敲，记录下vscode保存就可以自动格式化的配置:

首先安装3个插件：

ESLint

Vetur

Prettier - Code formatter

然后：左上角的文件》首选项》设置》建议》然后再右边的视图框里上下滑动，找到“在settings.json中编辑”，点进去，将下面的代码粘贴进去保存就行了：

{
  "editor.lineNumbers": "on", //开启行数提示
  "editor.quickSuggestions": {
    //开启自动显示建议
    "other": true,
    "comments": true,
    "strings": true
  },
  "editor.fontSize": 12,
  "editor.fontWeight": "100",
  // "prettier.useTabs": false, //使用制表符缩进
  // "editor.tabSize": 2, //制表符符号eslint
  // "editor.formatOnSave": true, //每次保存自动格式化
  // "prettier.semi": true, //去掉代码结尾的分号
  // // "prettier.singleQuote": true, //使用单引号替代双引号
  // "prettier.trailingComma": "none", //去除对象最末尾元素跟随的逗号
  // "javascript.format.insertSpaceBeforeFunctionParenthesis": false, //让函数(名)和后面的括号之间加个空格
  // "vetur.format.defaultFormatter.html": "js-beautify-html", //格式化.vue中html
  // "vetur.format.defaultFormatter.js": "vscode-typescript", //让vue中的js按编辑器自带的ts格式进行格式化
  "eslint.packageManager": "yarn",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.format.enable": true,
  "typescript.enablePromptUseWorkspaceTsdk": true,
  "vetur.experimental.templateInterpolationService": false,
  "vetur.validation.template": false,
  "vetur.validation.style": false,
  "vetur.validation.script": false,
  //autoFix默认开启，只需输入字符串数组即可
  // "eslint.validate": ["javascript", "vue", "html"],
  // "eslint.runtime": ""
}

.eslintrc.js配置如下

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: ["plugin:vue/essential", "eslint:recommended", "@vue/prettier"],
  parserOptions: {
    parser: "babel-eslint"
  },
  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off"
  }
};

//或者用下面的
module.exports = {
  root: true,
  env: {
    browser: true,
    node: true
  },
  parserOptions: {
    parser: "babel-eslint"
  },
  extends: [
    "plugin:vue/recommended",
    "plugin:prettier/recommended"
  ],
  // required to lint *.vue files
  plugins: ["vue", "prettier"],
  // add your custom rules here
  rules: {
    "no-console":
      process.env.NODE_ENV === "production"
        ? "error"
        : "off",
    "no-debugger":
      process.env.NODE_ENV === "production"
        ? "error"
        : "off",
    "vue/max-attributes-per-line": 0,
    "vue/html-self-closing": [
      "error",
      {
        html: {
          void: "always",
          normal: "never",
          component: "always"
        },
        svg: "always",
        math: "always"
      }
    ]
  }
};

.prettierrc 文件配置如下

{
  "tabWidth": 2,
  "useTabs": false,
  "singleQuote": false,
  "semi": true,
  "trailingComma": "none",
  "bracketSpacing": true
}