VScode代码格式化后ESLint报错

当我们在vscode中手动格式化代码时，有时会出现ESLint报错的情况

不废话先解决问题

先说解决问题的方法，按照我的方法成功解决了问题，那么你可以继续往下看一下思路。

在settings.json中修改或添加如下代码（已经有的配置项修改，没有的添加）

"eslint.autoFixOnSave": true, // 文件保存的时候自动按照ESLint格式化
"eslint.validate": [
    // 开启对.vue文件中错误的检查
    "javascript",
    "javascriptreact",
    {
      "language": "html",
      "autoFix": true
    },
    {
      "language": "vue",
      "autoFix": true
    }
]

1.安装两款必备的插件

ESLint: 在vue项目中我们通常安装ESLint进行代码格式的校验。vscode的ESLint插件，可以是被vue项目中的ESLint设置，并可以在编辑器中动态的校验代码格式并报错

Vetur：vue项目的必备插件，代码高亮，代码格式化等功能是这个插件提供的。我们在vscode中手动格式化代码，就是用的这个插件中设置的代码规则，这就是为什么VScode代码格式化后不符合ESLint 的原因——因为手动格式化使用的是Vetur中的代码风格，而ESLint使用的是自己的代码风格校验，二者会有不同，因此会有报错。

2. 配置ESLint 和 Vetur

除去文章开头的解决问题的配置，其余配置都是个性化配置，每个人根据喜好和需要个性化配置，我只说明在什么地方配置什么

配置ESLint

'ESLint'有两个含义：1. vscode的ESLint插件 2. Vue项目中的ESLint，所以配置ESLint就有两个位置。

Vue项目中的ESLint：在项目根目录的 '.eslintrc.js'

配置详见：eslint.bootcss.com/docs/4.0.0/… 因为我想让每行代码都有分号（虽然js不强制规定），所以我在rules中添加

'semi': ["error", "always"] // 分号结尾

vscode的ESLint插件（回到开始的问题解决方法）

在settings.json中修改或添加如下代码（已经有的配置项修改，没有的添加）

"eslint.autoFixOnSave": true, // 文件保存的时候自动按照ESLint格式化
"eslint.validate": [
    // 开启对.vue文件中错误的检查
    "javascript",
    "javascriptreact",
    {
      "language": "html",
      "autoFix": true
    },
    {
      "language": "vue",
      "autoFix": true
    }
]

配置Vetur

还是上面的settings.json文件 添加代码： "singleQuote": true : 很多人发现在vscode中格式化会把单引号自动转换为双引号，这句话就是为了让单引号得以保留。而且ESLint的默认也是最外层引号为单引号。 "semi": true : 句末添加分号，和ESLint配置一致。

"vetur.format.defaultFormatterOptions": {
  "prettier": {
      "singleQuote": true, // 单引号
      "semi": true, // 添加句末分号
  }
},

3.写在最后

1. 我们配置好"eslint.validate" 让ESLint检查vue文件，并"eslint.autoFixOnSave": true 打开这个选项，文件在保存的时候就按照ESLint的语法进行格式化，其实我们己经没必要在手动格式化了。
2. 但是有的人习惯手动格式化，手动格式化使用的是Vetur的代码风格设置，为了让格式化后的代码符合ESLint的校验，我们需要更改Vetur的配置让它和ESLint格式一致。