settings.json、.eslintrc.js、.prettierrc.js别再网上盲目copy了，适合的才是正解_综合

背景

需求

新老前端项目交替开发，老项目保存时会进行格式化，导致文件的格式都变动了，导致code review不清楚具体修改点（老项目年代久远，所以维稳为主）。因此需要在新项目（vue）中才进行统一代码格式化，老项目保留手写格式。

改动前

安装eslint，prettier插件
配置settings.json
配置.eslintrc.js

改动后

安装eslint，prettier插件
配置.eslintrc.js和.prettierrc.js
新项目中安装eslint，prettier相关依赖
package.json增加命令 “lintfix”: “eslint --fix --ext .js,.vue --ignore-path .gitignore .”
取消在settings.json配置保存格式化

过程

eslint：重点是检查代码质量问题，捎带部分格式检查

prettier：如字面意思，主要为了代码的美化

eslint主要检查代码质量问题和js格式，不能很好的管理标签和css格式。prettier就很好的弥补了eslint的弊端，因此eslint和prettier经常一起使用

settings.json作用：开发过程中，将插件检测出的错误按照所配置的进行修复

.eslintrc.js作用：项目执行eslint检查修复命令，所依据规范

清楚上述三者作用之后，从需求(不需要实时格式化，只需要在提交代码前格式化)出发，进行如下改动

vscode安装eslint，prettier插件（作用是在编辑器中提示检查结果，并不会进行格式化）
setting.json文件（关闭保存格式化）

{
    "editor.formatOnSave": false,
}

安装eslint，prettier香港依赖，package.json文件增加以下

"devDependencies": {
    "eslint": "^7.0.0","babel-eslint": "^10.1.0","eslint-config-standard": "^14.1.1","eslint-plugin-html": "^6.2.0","eslint-plugin-import": "^2.25.2","eslint-plugin-node": "^11.1.0","eslint-plugin-promise": "^5.1.1","eslint-plugin-standard": "^5.0.0","eslint-plugin-vue": "^7.20.0","prettier": "^1.19.1","@vue/eslint-config-prettier": "^6.0.0","eslint-config-prettier": "^6.15.0","eslint-plugin-prettier": "^3.1.4","prettier-eslint": "^11.0.0",}

.eslintrc.js文件

module.exports = {
    root: true,extends: ["eslint:recommended","plugin:vue/recommended","plugin:prettier/recommended"],env: {
    browser: true,node: true,},plugins: ["vue"],parserOptions: {
    parser: "babel-eslint",sourceType: "module",allowImportExportEverywhere: false,codeFrame: false,},// "off" or 0 - 关闭规则// "warn" or 1 - 将规则视为一个警告（不会影响退出码）// "error" or 2 - 将规则视为一个错误 (退出码为1)rules: {
    // 使用prettier格式缩进'indent': 0,// 强制使用骆驼拼写法命名约定'camelcase': [2, {
    properties: "never"}],'semi': [2, 'never'],'quotes': [2, 'single', {
    'avoidEscape': true}],// 禁止没使用的变量'no-unused-vars': 2,// 避免使用不必要的括号(关闭，与prettier冲突)'no-extra-parens': 0,// 禁用行尾分号'no-extra-semi': 2,// 禁用行尾空格'no-trailing-spaces': 2,// 对象中禁止出现重复的key'no-dupe-keys': 2,// 强制对象赋值引用使用点形式'dot-notation': 2,// 魔术数字'no-magic-numbers': ['warn',{
    ignoreArrayIndexes: true}],// 禁止对 String，Number 和 Boolean 使用 new 操作符'no-new-wrappers': 2,// 自我赋值'no-self-assign': 1,// 数组使用一致的空格'array-bracket-spacing': 1,// 强制把变量的使用限制在其定义的作用域范围内'block-scoped-var': 2,'block-spacing': 2,// 强制使用let或const 不能使用var'no-var': 2,// 要求对象字面量简写语法'object-shorthand': 1,// 要求构造函数首字母大写 （要求调用 new 操作符时有首字母大小的函数，允许调用首字母大写的函数时没有 new 操作符。）'new-cap': [2,{
    newIsCap: true,capIsNew: false}],// 强制一行的最大长度'max-len': [1, 120],// 强制 function 块最多允许的的语句数量'max-statements': [1, 200],// 强制回调函数最大嵌套深度 5层'max-nested-callbacks': [1, 5],// 控制逗号前后的空格'comma-spacing': [2,{
    before: false,after: true}],'arrow-body-style': 0,// 要求箭头函数的参数使用圆括号'arrow-parens': [1, 'as-needed'],// 禁止重新声明变量'no-redeclare': 2,// if return之后没必要使用else'no-else-return': 1,// 禁止使用弱等于'eqeqeq': 2,'comma-dangle': ['error', 'never'],// 花开括号样式// 'brace-style': [2, 'tbs'],'callback-return': 2,'computed-property-spacing': [2, 'never'],'dot-location': [2, 'property'],// eslint与prettier冲突项'vue/html-self-closing': 0,"vue/max-attributes-per-line": 0,'vue/attribute-hyphenation': 0,'vue/require-default-prop': 0,"vue/singleline-html-element-content-newline": 0,"vue/multiline-html-element-content-newline":0,'prettier/prettier': 2,},// 全局变量globals: {
    WebViewJavascriptBridge: true,reject: true,resolve: true},};

.prettierrc.js

module.exports = {
    printWidth: 120, //一行的字符数，如果超过会进行换行，默认为80tabWidth: 2, //一个tab代表几个空格数，默认为80useTabs: false, //是否使用tab进行缩进，默认为false，表示用空格进行缩减singleQuote: true, //字符串是否使用单引号，默认为false，使用双引号semi: false, //行位是否使用分号，默认为truetrailingComma: 'none', //是否使用尾逗号，有三个可选值"<none|es5|all>"bracketSpacing: true, //对象大括号直接是否有空格，默认为true，效果：{ foo: bar }jsxBracketSameLine: false, // 在jsx中把'>' 是否单独放一行arrowParens: 'avoid',   // 箭头函数参数括号 默认avoid 可选 avoid| always,avoid 能省略括号的时候就省略 例如x => x,always 总是有括号eslintIntegration: true, // #让prettier使用eslint的代码格式进行校验
};

package.json增加命令

"lintFix": "eslint --fix --ext .js,.vue --ignore-path .gitignore ."

结果

终端执行

cnpm run lintfix

项目会进行检查和格式化，并输出需要手动调整的警告和异常

微信截图_20211027164820.png

补充

若执行命令报错，注意安装依赖的版本
.prettier.js配置改动需要重启vscode才生效
当eslint与prettier规则冲突时，若能找到统一的配置值最好，不能的话建议直接使用prettier规则，禁止eslint冲突的规则

微信截图_20211027170046.png

若没有老项目需要维护，可以放心大胆的在setting.json中打开保存格式化配置（其格式化参数配置网上百度即可）

eslint-webpack-plugin，可在执行本地打包运行时检查项目中代码质量，但不会对代码进行格式化

具体用法可参考https://webpack.docschina.org/plugins/eslint-webpack-plugin/