** 工欲善其事必先利其器，前端开发中对团队风格要求越来越高，这个时候就需要我们通过一些插件规范代码风格，eslint+prettier无疑是最好用的组合，但是方便归方便，在使用过程中我们总是会遇到各种各样的坑，为了避免后续踩坑，这里以vscode的安装为工具做个示例。觉得受用的给个赞吧(●’◡’●)！**

第一步 清除多余的插件，还原默认配置

对新手来说，vscode的扩展并不是越多越好的，特别是当你还不那么会调整配置的时候。所以安装之前就先清理扩展和配置，清理扩展很简单，在扩展列表中，将那些插件逐项卸载就行，我就仅保留了vscode的中文包，以及Debugger for Chrome，这两个插件包，而环境配置方面，VSCode中有三种类型的配置文件：
默认配置文件（优先级最低）
用户配置文件（优先级次之）
工程配置文件 （优先级最高）
所以，我们只需要清除用户配置文件的值，以及工程配置文件的值，就是还原到默认配置了，我们可以用快捷键【ctrl+,】打开设置界面。如下图：
![在这里插入图片描述](https://img-blog.csdnimg.cn/594b20c4a0e647c68ac30e6656c2dbfd.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5LqR56uv5LmL5LiKQGphY2s=,size_20,color_FFFFFF,t_70,g_se,x_16

分别在选择用户和工作区的时候，点击右上角的打开设置的json文件，用户的json文件和工作区的json文件，虽然都是叫settings.json，但在路径上是不同的，一个是在项目目录的.vscode目录下，一个是在C盘的用户目录下的。将这两个文件中的配置都全部清除，仅保留{}。这样根据vscode的配置优先级来说，就是默认配置了。

第二步 安装Vetur插件

在Vscode的扩展中搜索Vetur，Vetur的功能就是语法突出显示，错误提示，格式化，自动完成等
安装之后，js/css文件都有高亮显示了，但是保存之后可能没有格式化，我们需要做一下特殊设置

下一步，我们开始配置Vetur中的风格处理，无论是Vetur官网，还是vscode设置中显示，vetur的formatter大多采用的Prettier风格。有2个地方可以进行配置prettier风格参数，一个是vscode的配置文件settings.json，还有一个就是在项目根目录下创建.prettierrc文件，文件内容也是采用json格式，但是需要注意：根据官网的说明，一旦在项目的根目录下存在.prettierrc文件，则settings.json中的prettier配置就会无效。

// settings.json{......"vetur.format.defaultFormatterOptions": {"prettier": {// Prettier option here"trailingComma": "es5", // 多行时，尽可能打印尾随的逗号"tabWidth": 4, // 会忽略vetur的tabSize配置"useTabs": false, // 是否利用tab替代空格"semi": true, // 句尾是否加;"singleQuote": true, // 使用单引号而不是双引号"arrowParens": "avoid", // allow paren-less arrow functions 箭头函数的参数使用圆括号}}
}

// .prettierrc
{"tabWidth": 4, // 会忽略vetur的tabSize配置"useTabs": false, // 是否利用tab替代空格"semi":false, // 句尾是否加;"trailingComma": "none", // es5多行时，尽可能打印尾随的逗号"arrowParens": "avoid", // allow paren-less arrow functions 箭头函数的参数使用圆括号"vueIndentScriptAndStyle":true,
}

3.安装ESLint插件

在搞定了Vetur之后，我们来安装ESlint，在扩展商店搜索eslint，很容易就找到这个插件，相关的插件还有很多，例如Prettier ESLint等，我们一个一个来，先搞定ESLint再说，看eslint插件的说明，单单vscode中安装eslint是不够的，还需要项目中安装eslint依赖包。也就是需要在package.json中需要eslint，而eslint是针对很多种开发语言的，针对每一个开发语言都有一个独立的插件，对应vue的就是eslint-plugin-vue了，我们需要在项目目录下执行下面语句来执行安装。

> npm install -D eslint eslint-plugin-vue --registry=https://registry.npm.taobao.org

安装完eslint和eslint-plugin-vue之后，我们还需要创建eslint的配置文件，建议在项目根目录下,用命令行方式执行eslint --init来创建配置文件，因为生产的.eslintrc.js文件就在你当前执行命令的目录下。注意：我之前想在vscode的终端上直接执行命令，可惜提示什么策略不对，就是权限不足，懒得再去搞什么配置策略，直接用cmd命令，在项目目录下执行就行。

// .eslintrc.js
module.exports = {"env": {    //用来预定义全局环境变量，常用的有browser，es6,node,jest,jquery"browser": true,"es6": true,"node": true},"extends": ["eslint:recommended","plugin:vue/essential"],"parserOptions": {  // 支持的 JavaScript 语言选项"parser": "babel-eslint",   // 默认使用Espree作为其解析器,除此之外就Esprima,Babel-ESLint,@typescript-eslint/parser"ecmaVersion": 12, // ECMAScript 版本,默认设置为 3，5（默认）,也可以年份，2015（同 6），2012（as 12）"sourceType": "module"  // "script" (默认) 或 "module"（如果你的代码是 ECMAScript 模块)},"plugins": [    //eslint支持使用第三方插件，需要npm先安装,后使用"vue"   // 可以用package的名称,eslint-plugin-vue，也可以省略eslint-plugin-,直接填写vue],"rules": {// 强制使用单引号 'quotes': ['error', 'single'],// 在块级作用域外访问块内定义的变量是否报错提示 'block-scoped-var': 0,}
};

安装完这个，我们就可以在vscode中发现，eslint已经生效了。为了避免eslint对没必要的文件也进行检查，添加一个.eslintignore文件，保存需要略过的文件和目录

# .eslintignore
build/*.js
src/assets
public
dist
.eslintrc.js

下一步需要在vscode中增加eslint的相关配置。

// settings.json
{
.......// 指定eslint校验的文件类型"eslint.validate": ["javascript","javascriptreact","html","vue"],// "eslint.autoFixOnSave": true,"editor.codeActionsOnSave": {"source.fixAll.eslint": true},"eslint.run": "onSave",   // 保存就校验
}

接下来，在package.json中补上eslint校验的命令行，我们在package.json中，找到scripts节点，增加一行新的启动命令 “lint”: “vue-cli-service lint”。

//package.json
{......"scripts": {"serve": "vue-cli-service serve","build": "vue-cli-service build","lint": "vue-cli-service lint"},......
}

可以根据自己的习惯来修改这些规则，注意所有规则第一个值适用下面定义，0或off：关闭；1或warn：提示警告，但不影响代码存在；2或error：提示错误，执行ESLint校验会导致失败。完整的.eslintrc.js如下：

// .eslintrc.js
module.exports = {"root": true,    // 表明这就是根目录了，停止去父级目录中寻找配置"env": {    //用来预定义全局环境变量，常用的有browser，es6,node,jest,jquery"browser": true,"es6": true,"node": true},"parserOptions": {  // 支持的 JavaScript 语言选项"parser": "babel-eslint",   // 默认使用Espree作为其解析器,除此之外就Esprima,Babel-ESLint,@typescript-eslint/parser"ecmaVersion": 12, // ECMAScript 版本,默认设置为 3，5（默认）,也可以年份，2015（同 6），2012（as 12）"sourceType": "module"  // "script" (默认) 或 "module"（如果你的代码是 ECMAScript 模块)},"extends": [    // 规则模版"eslint:recommended",   // 启用一系列核心规则，"plugin:vue/essential",  // 启用eslint vue插件的规则模版,base,essential,strongly-recommended,recommended(最严)],"plugins": [    //eslint支持使用第三方插件，需要npm先安装,后使用"vue",   // 可以用package的名称,eslint-plugin-vue，也可以省略eslint-plugin-,直接填写vue],"rules": {  //补充规则// 强制使用单引号'quotes': ['error', 'single'],// 在块级作用域外访问块内定义的变量是否报错提示'block-scoped-var': 0,"vue/max-attributes-per-line": 0,"vue/singleline-html-element-content-newline": "off","vue/multiline-html-element-content-newline": "off","vue/name-property-casing": ["error", "PascalCase"],"vue/no-v-html": "off",'accessor-pairs': 2,'arrow-spacing': [2, {'before': true,'after': true}],'block-spacing': [2, 'always'],'brace-style': [2, '1tbs', {'allowSingleLine': true}],'camelcase': [0, {'properties': 'always'}],'comma-dangle': 0,'comma-spacing': [2, {'before': false,'after': true}],'comma-style': [2, 'last'],'constructor-super': 2,'curly': [2, 'multi-line'],'dot-location': [2, 'property'],'eol-last': 2,'eqeqeq': ["error", "always", { "null": "ignore" }],'generator-star-spacing': [2, {'before': true,'after': true}],'handle-callback-err': [2, '^(err|error)$'],'indent': [2, 4, {'SwitchCase': 1}],'jsx-quotes': [2, 'prefer-single'],'key-spacing': [2, {'beforeColon': false,'afterColon': true}],'keyword-spacing': [2, {'before': true,'after': true}],'new-cap': [2, {'newIsCap': true,'capIsNew': false}],'new-parens': 2,'no-array-constructor': 2,'no-caller': 2,'no-console': 'off','no-class-assign': 2,'no-cond-assign': 2,'no-const-assign': 2,'no-control-regex': 0,'no-delete-var': 2,'no-dupe-args': 2,'no-dupe-class-members': 2,'no-dupe-keys': 2,'no-duplicate-case': 2,'no-empty-character-class': 2,'no-empty-pattern': 2,'no-eval': 2,'no-ex-assign': 2,'no-extend-native': 2,'no-extra-bind': 2,'no-extra-boolean-cast': 2,'no-extra-parens': [2, 'functions'],'no-fallthrough': 2,'no-floating-decimal': 2,'no-func-assign': 2,'no-implied-eval': 2,'no-inner-declarations': [2, 'functions'],'no-invalid-regexp': 2,'no-irregular-whitespace': 2,'no-iterator': 2,'no-label-var': 2,'no-labels': [2, {'allowLoop': false,'allowSwitch': false}],'no-lone-blocks': 2,'no-mixed-spaces-and-tabs': 2,'no-multi-spaces': 2,'no-multi-str': 2,'no-multiple-empty-lines': [2, {'max': 1}],'no-native-reassign': 2,'no-negated-in-lhs': 2,'no-new-object': 2,'no-new-require': 2,'no-new-symbol': 2,'no-new-wrappers': 2,'no-obj-calls': 2,'no-octal': 2,'no-octal-escape': 2,'no-path-concat': 2,'no-proto': 2,'no-redeclare': 2,'no-regex-spaces': 2,'no-return-assign': [2, 'except-parens'],'no-self-assign': 2,'no-self-compare': 2,'no-sequences': 2,'no-shadow-restricted-names': 2,'no-spaced-func': 2,'no-sparse-arrays': 2,'no-this-before-super': 2,'no-throw-literal': 2,'no-trailing-spaces': 2,'no-undef': 2,'no-undef-init': 2,'no-unexpected-multiline': 2,'no-unmodified-loop-condition': 2,'no-unneeded-ternary': [2, {'defaultAssignment': false}],'no-unreachable': 2,'no-unsafe-finally': 2,'no-unused-vars': [2, {'vars': 'all','args': 'none'}],'no-useless-call': 2,'no-useless-computed-key': 2,'no-useless-constructor': 2,'no-useless-escape': 0,'no-whitespace-before-property': 2,'no-with': 2,'one-var': [2, {'initialized': 'never'}],'operator-linebreak': [2, 'after', {'overrides': {'?': 'before',':': 'before'}}],'padded-blocks': [2, 'never'],'quotes': [2, 'single', {'avoidEscape': true,'allowTemplateLiterals': true}],'semi': [2, 'never'],'semi-spacing': [2, {'before': false,'after': true}],'space-before-blocks': [2, 'always'],'space-before-function-paren': [2, 'never'],'space-in-parens': [2, 'never'],'space-infix-ops': 2,'space-unary-ops': [2, {'words': true,'nonwords': false}],'spaced-comment': [2, 'always', {'markers': ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ',']}],'template-curly-spacing': [2, 'never'],'use-isnan': 2,'valid-typeof': 2,'wrap-iife': [2, 'any'],'yield-star-spacing': [2, 'both'],'yoda': [2, 'never'],'prefer-const': 2,'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,'object-curly-spacing': [2, 'always', {objectsInObjects: false}],'array-bracket-spacing': [2, 'never']}
};

4.安装Prettier插件

还是在vscode的扩展商店搜索prettier，结果好几个都叫Prettier - Code formatter的插件，选个发布者叫Perttier，这个应该算标准的吧。看这个插件说明，也是需要通过npm安装prettier依赖包的。如果我们要把prettier风格替代eslint的代码格式检查，就还需要安装eslint-plugin-prettier，如同eslint的vue插件一样，如果eslint和prettier出现了冲突，就需要安装eslint-config-prettier插件了。

> npm install prettier eslint-plugin-prettier eslint-config-prettier -D --save-exact --registry=https://registry.npm.taobao.org

安装完prettier的相关依赖包之后，调整.eslintrc.js文件

{"extends": ["plugin:prettier/recommended"]
}

最终,在上面的.eslintrc.js文件上，增加prettier新增部分的配置即可

//.eslintrc.js
module.exports = {"root": true, // .....  "extends": [    // 规则模版"eslint:recommended",   // 启用一系列核心规则，"plugin:vue/essential",  // 启用eslint vue插件的规则模版,base,essential,strongly-recommended,recommended(最严)"plugin:prettier/recommended"    // prettier新增],"plugins": [    //eslint支持使用第三方插件，需要npm先安装,后使用"vue",   // 可以用package的名称,eslint-plugin-vue，也可以省略eslint-plugin-,直接填写vue"prettier" // prettier新增],// .....}

因为安装了Perttier,以及eslint-plugin-prettier，这里就会需要用到项目根目录下的prettier的配置文件，根据官方介绍，prettier的配置文件支持多种命名和后缀，具体参考https://prettier.io/docs/en/configuration.html，因为是初学者，想要在配置文件中可以合法的加入注释，我选用.prettierrc.js命名。

// .prettierrc.js
module.exports = {tabWidth: 4, // 会忽略vetur的tabSize配置useTabs: false, // 是否利用tab替代空格singleQuote: true, // 使用单引号而不是双引号jsxSingleQuote: true,semi: false, // 句尾是否加;trailingComma: 'es5', // es5多行时，尽可能打印尾随的逗号arrowParens: 'avoid', // allow paren-less arrow functions 箭头函数的参数使用圆括号endOfLine: 'lf', // 换行符校验jsxBracketSameLine: true, // #多行JSX中的>放置在最后一行的结尾，而不是另起一行（默认false）bracketSpacing: true,proseWrap: 'always', // 换行,always：超过printWidth就换行，never：不换行，preserve：按照原样处理printWidth: 220,
}

这样基本可以说，Perttier的插件配置也算好了，但是vscode提示各种警报，我们开始来修正提示的错误，有些东西一概就好了，但是有些错误，在编辑器中通过autofix修正了eslint的错误，但是【ctrl+s】保存后，又自动变成错误格式了，这就是风格和校验之间的规则没有统一，出现了冲突，这个时候需要我们来准确配置相关的规则，并明确我们想要的规则到底是什么，有些规则并没有对错，仅仅只是习惯问题而已，例如尾项有没有"，"，eslint标准是没有，可是我习惯有，又例如html属性是否换行？又不换行的标准，有每一个属性一行的风格，还有超过长度才换行的标准，等等，这些就是我们接下来要搞定的冲突了。

5.解决Vetur，ESLint，Perttier之间的冲突

ESLint主要用来解决JS的风格和代码语法检查，Perttier就是纯粹的代码风格处理的，支持js,ts,jsx,json,css,scss,vue,markdown等。这两个在Js文件上比较容易统一，Perttier来处理JS代码风格，eslint来检查JS代码语法，但是在vue文件上，有html格式的
先来说由vetur来处理vue文件的settings.json的配置。完整的settings.json如下

// settings.json
{"workbench.startupEditor": "newUntitledFile","files.autoSave": "off",    // 关闭文件自动保存，避免开发时候页面变化"editor.tabSize": 4, // tab距离"editor.formatOnSave": true, // 在保存时自动格式化"editor.minimap.enabled": false, // 关闭右侧快速预览"files.eol": "\n", // 设定文件的换行符,\n（linux模式）或\r\n(win模式)"editor.detectIndentation": false, // 关闭vscode的缩进检查"editor.fontSize": 14, //设置文字大小"editor.lineHeight": 0, //设置文字行高"editor.lineNumbers": "on", //开启行数提示"editor.quickSuggestions": {//开启自动显示建议"other": true,"comments": true,"strings": true},"window.zoomLevel": 0, // 调整窗口的缩放级别//根据文件后缀名定义vue文件类型"files.associations": {"*.vue": "vue"},// 为各类文件制定Fatmatter插件"[vue]": {// "editor.defaultFormatter": "esbenp.prettier-vscode"  // 采用prettier处理格式化"editor.defaultFormatter": "octref.vetur" // 采用vetur来处理Fatmatter},"[javascript]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"[json]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"[jsonc]": {"editor.defaultFormatter": "vscode.json-language-features"},// Vetur 的各类设定,仅当上面[vue]的editor.defaultFormatter的值为octref.vetur的时候，才起效"vetur.format.options.tabSize": 4,"vetur.format.styleInitialIndent": false, // 关闭vue中script标签初始缩进，开启会和eslint的缩进校验冲突"vetur.format.scriptInitialIndent": false, // 关闭vue中style标签初始缩进，开启会和eslint的缩进校验冲突"vetur.format.defaultFormatter.html": "js-beautify-html", // 针对vue中的template部分的风格模版，也可以是：prettier"vetur.format.defaultFormatter.js": "prettier-eslint", // 针对vue中的script部分的风格模版，或者prettier"vetur.format.defaultFormatter.css": "prettier", // 针对vue中的style部分的风格模版"vetur.format.defaultFormatterOptions": {"js-beautify-html": { // 配置不能和prettier的配置冲突，eslint校验的时候采用的prettier的风格// 给js-beautify-html设置属性隔断"wrap_line_length": 220, //换行长度// 属性换行// 对属性进行换行。// - auto: 仅在超出行长度时才对属性进行换行。// - force: 对除第一个属性外的其他每个属性进行换行。// - force-aligned: 对除第一个属性外的其他每个属性进行换行，并保持对齐。// - force-expand-multiline: 对每个属性进行换行。// - aligned-multiple: 当超出折行长度时，将属性进行垂直对齐。"wrap_attributes": "auto",// Maximum number of line breaks to be preserved in one chunk (0 disables)// "max_preserve_newlines": 0,"end_with_newline": false},"prettyhtml": {"printWidth": 220,"singleQuote": false,"wrapAttributes": false,"sortAttributes": false}// "prettier": {//         // Prettier option here//         "printWidth": 120,//         "trailingComma": "none", // 多行时，尽可能打印尾随的逗号//         "tabWidth": 4, // 会忽略vetur的tabSize配置//         "useTabs": false, // 是否利用tab替代空格//         "semi": false, // 句尾是否加;//         "singleQuote": true, // 使用单引号而不是双引号//         "arrowParens": "avoid", // allow paren-less arrow functions 箭头函数的参数使用圆括号// }},// ESLint 的相关配置"eslint.validate": ["javascript","javascriptreact","vue"], // eslint校验的文件类型// 该属性相当于配置js文件的操作// "[javascript]": {//   "editor.formatOnSave": true,//   "editor.defaultFormatter": "esbenp.prettier-vscode"// },// "eslint.autoFixOnSave": true,  很多插件提示这么设定，但实际vscode中已经弃用这个设置，改用下面的方式。"editor.codeActionsOnSave": {// 保存时触发的事件"source.fixAll.eslint": true // 自动fix eslint},"eslint.run": "onSave", // 保存就校验// 函数名后增加空格"javascript.format.insertSpaceBeforeFunctionParenthesis": true,"javascript.format.insertSpaceAfterFunctionKeywordForAnonymousFunctions": true,
}

基本来说Vetur，ESLint，Prettier都算是配置好了，也应该解决了相互之间的冲突了。
参考资源：

https://blog.csdn.net/peade/article/details/103865934

https://www.cnblogs.com/xjnotxj/p/10828183.html

https://blog.csdn.net/qq_15601471/article/details/99985647

https://www.cnblogs.com/matd/p/10972319.html

https://prettier.io/docs/en/configuration.html

https://blog.csdn.net/u010108836/article/details/107873990

https://www.cnblogs.com/sunjinggege/p/8809536.html

https://www.cnblogs.com/little-ab/articles/9521771.html

https://eslint.vuejs.org/rules/max-attributes-per-line.html

https://blog.csdn.net/justflow/article/details/109897364