简单记录如何在vscode中配置vue+eslint+prettier

每次使用eslint，配置都要搞半天，觉得还是要记录下配置过程

1.安装如下vue插件

npm i eslint@7 -D 

npm i eslint-config-prettier eslint-plugin-prettier prettier eslint-plugin-vue babel-eslint -D

这里强制安装eslint7的版本是因为eslint8以上的版本废除了babel-eslint，转而使用 @babel/eslint-parser替代。然而我在使用@babel/eslint-parser时，和项目本身的babel产生了版本冲突，为了不改动项目原有的babel版本，我选择降低eslint版本。
安装eslint-plugin-prettier时一定要安装prettier，否则会导致之后在.prettierrc中的配置无法生效。

2.vscode中安装eslint和prettier插件

3.配置setting

在首选项->设置中找到eslint，选择在settings.json中编辑，添加如下字段。这部分字段是为了保证在保存vue文件时直接自动修复错误

"eslint.alwaysShowStatus": true,  // 总是在 VSCode 显示 ESLint 的状态
"eslint.quiet": true, // 忽略 warning 的错误
"editor.codeActionsOnSave": {     // 保存时使用 ESLint 修复可修复错误
   "source.fixAll": true,
   "source.fixAll.eslint": true
}

4.配置.eslintrc.js

因为项目不大，我在配置中直接使用了prettier/recommended的规则。如果想要自己配置规则，就使用"plugin:vue/essential"，然后在rules中自己添加规则。
这里还遇到一个小问题，在使用parser: 'babel-eslint’后，必须添加parser: ‘vue-eslint-parser’，不然eslint会在vue文件中报如下的错

Parsing error: Unexpected character ‘@’

module.exports = {
  env: {
    browser: true,
    es6: true,
    node: true
  },
  extends: [
    'eslint:recommended',
    'plugin:prettier/recommended',
    //"plugin:vue/essential"
  ],
  globals: {
    Atomics: 'readonly',
    SharedArrayBuffer: 'readonly'
  },
  parser: 'vue-eslint-parser',
  parserOptions: {
    parser: 'babel-eslint',
    ecmaVersion: 2018,
    sourceType: 'module',
    ecmaFeatures: {
      jsx: true,
      globalReturn: true,
      impliedStrict: true,
      experimentalObjectRestSpread: true
    }
  },
  plugins: ['vue', 'prettier']
}

5.配置.prettierrc

其实到上一步，按道理来说，重启vscode后eslint就配置好了，文件内会提示报错，且保存文件时会自动修复报错。但是prettier/recommended的部分规则我并不是很喜欢，比如template内每个元素的属性会自动换行，很占地方；句尾会添加分号；在对象或数组最后一个元素后面添加逗号。于是在.prettierrc中重新配置了下。
具体参数的意思可以参考官网 https://prettier.io/docs/en/options.html

{
  "tabWidth": 2,
  "useTabs": false,
  "printWidth": 300,
  "semi": false,
  "singleQuote": true,
  "arrowParens": "avoid",
  "bracketSpacing": true,
  "endOfLine": "auto",
  "eslintIntegration": false,
  "htmlWhitespaceSensitivity": "ignore",
  "ignorePath": ".gnore",
  "trailingComma": "none"
  }

OK！完成！