VSCode 中使用ESLint+Prettier来统一前端代码风格

eslint - 校验代码语法

检查语法问题，例如：声明一个变量应该 const 还是 let ，使用的变量有没有声明等等。

prettier - 统一格式化代码

检查代码风格问题，它支持多种语言，我们这里讨论关于 JavaScript 的，例如应该使用单引号还是双引号，该不该换行，tab 键占多少个空格，结尾要不要分号 等等问题。
使用 prettier 来处理代码风格的时候，就不要再同时使用 eslint 来处理代码风格问题了

eslint文档
prettier文档

安装

npm i eslint prettier eslint-plugin-prettier -D
or
yarn eslint prettier eslint-plugin-prettier --dev

配置 eslint 使其调用 prettier
在项目根目录新增.eslintrc.js文件，并作以下配置

//.eslintrc.js
module.exports = {
  root: true,
  env: {
    browser: true, // 设置为所需检查的代码是在浏览器环境运行的
    node: true
  },
  extends: [
    'plugin:vue/essential',
    '@vue/prettier',
  ],
  parserOptions: {
    parser: 'babel-eslint'
  },
  rules: {
    "prettier/prettier": "error"
  }
}

安装vscode插件

首先，需要安装 ESLint、Prettier - Code formatter这两个插件

vscode插件配置

打开settings.json文件

"editor.formatOnSave": true, // 每次保存时自动格式化
"editor.tabSize": 2, // 缩进2个空格
// 添加vue支持
"eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "html",
    "vue",
],
"eslint.options": { //指定eslint配置文件位置
    "configFile": ".eslintrc.js" //指定项目根目录中的eslint配置文件
},
"eslint.codeAction.showDocumentation": {
    "enable": true
},
"editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
}