VSCode 集成 ESLint 和 Prettier

情景

ESLint 是一个前端代码质量检测工具，然而配置非常非常非常的麻烦（前端的配置真的是超多呢），所以在吾辈的 VueJS 项目中直接使用了 standard 规则。然而问题在于有了代码规则，还需要自动的格式化，否则为了手动格式化是一件极其痛苦的事情。。。

步骤

VSCode 安装下面三个插件

• Vetur
• ESLint
• Prettier - Code formatter

然后在 User Settings，添加以下配置

// 配置 ESlint 和 Prettier
"eslint.autoFixOnSave": true, // 每次保存的时候将代码按 eslint 格式进行修复
"prettier.eslintIntegration": true, // 让 prettier 使用 eslint 的代码格式进行校验
"prettier.semi": false, // 去掉代码结尾的分号
"prettier.singleQuote": true, // 使用单引号替代双引号
"javascript.format.insertSpaceBeforeFunctionParenthesis": true, // 让函数 (名) 和后面的括号之间加个空格
"vetur.format.defaultFormatter.html": "js-beautify-html", // 格式化. vue 中 html
"vetur.format.defaultFormatter.js": "vscode-typescript", // 让 vue 中的 js 按编辑器自带的 ts 格式进行格式化
"vetur.format.defaultFormatterOptions": {
  "js-beautify-html": {
    "wrap_attributes": "force-aligned" // 属性强制折行对齐
  }
},
"eslint.validate": [
  // 开启对. vue 文件中错误的检查
  "javascript",
  "javascriptreact",
  {
    "language": "html",
    "autoFix": true
  },
  {
    "language": "vue",
    "autoFix": true
  }
]

好了，现在可以正常使用 VSCode 的格式化功能了，保存时也会进行格式化同时修复 ESLint 发现的错误。