vscode中prettier与eslint一起使用格式化时候会报错

2021更新

prettier官方更新了一个插件，引入更加方便。
npm install --save-dev eslint-plugin-prettier

module.exports = {
  plugins: ['prettier'],
  'extends': [
    '@vue/prettier',
    '@vue/prettier/@typescript-eslint'
  ],
}

代码风格与代码检测冲突

我们经常使用prettier与eslint进行代码格式化与代码检测，但是经常遇见格式化之后依然存在代码检测的异常，这主要是因为eslint的配置没有与prettier的规则设置为相同。
我查看了网上给的设置都比较过时了，prettier官方提供了一个新的方法

例子

通过prettier格式化之后，报错

设置方法

1. 首先在vscode的setting.json中添加prettier的设置

  "editor.codeActionsOnSave": {
    // For ESLint
    "source.fixAll.eslint": true
  }

2. 安装 eslint-config-prettier

npm install --save-dev eslint-config-prettier

3. 在.eslintrc.js里添加prettier的规则

module.exports = {
  "你自己的其他配置",
   "prettier"// 最好放在最后
}

额外添加prettier配置

如果我们只需要对VUE文件进行统一，我们可以进行单独的配置

"extends": [
     "你自己的其他配置",
    "prettier",
    "prettier/@typescript-eslint",
    "prettier/babel",
    "prettier/flowtype",
    "prettier/react",
    "prettier/standard",
    "prettier/unicorn",
    "prettier/vue"
  ]

结果

添加完成后，就eslint就会结合prettier的规则进行检测