vscode，解决ESLint与Prettier冲突问题

1、安装ESLint插件

如果项目使用了eslint规则，当代码格式不满足eslint规则时，那么vscode会给出错提示，方便用户修正代码格式。

2、创建.prettier文件

在电脑创建一个.prettier文件，用vscode打开，文件加入以下配置：
“semi”: false, 句末禁止使用分号
“singleQuote”: true, 使用单引号
“printWidth”: 300, 单行长度
“trailingComma”: “none”, 禁止使用尾逗号
“arrowParens”: “avoid” ，函数体一个参数的时候禁止使用括号

{
  "semi": false, 
  "singleQuote": true, 
  "printWidth": 300,
  "trailingComma": "none",
  "arrowParens": "avoid"
}

3、配置json

(1) 打开settings.json文件
文件 → 首选项 → 设置 → 打开设置

(2) 在setting.json中加入以下配置：

// ESLint 插件的配置
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
  "source.fixAll": true
},
"eslint.alwaysShowStatus": true,

//导入.prettierrc文件 （路径根据自己的实际路径填写）
"prettier.configPath": "C:\\Users\\aaa\\.prettier",

// 设置 .vue 文件中，HTML代码的格式化插件
"vetur.format.defaultFormatter.html": "js-beautify-html",
"vetur.ignoreProjectWarning": true,
"vetur.format.defaultFormatterOptions": {
  "js-beautify-html": {
    "wrap_attributes": false
  },
  "prettier": {
    "printWidth": 300,
    "semi": false,
    "singleQuote": true,
    "arrowParens": "avoid",
    "trailingComma": "none"
  }
},
"[vue]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascript]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[jsonc]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"javascript.format.insertSpaceBeforeFunctionParenthesis": true

4、使用

保存文件后，代码会遵循eslint规则展示。
注：右击→格式化文档，此时prettier会失效。可以使用其它的格式化插件，如vetur插件，格式化之后eslint会提示报错，保存文档，系统会自动修复错误的格式。