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检查修复命令，所依据规范

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

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

2. setting.json文件（关闭保存格式化）

{
  "editor.formatOnSave": false,
}

3. 安装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",
  }

4. .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
    },
  };

5. .prettierrc.js

module.exports = {
  printWidth: 120, //一行的字符数，如果超过会进行换行，默认为80
  tabWidth: 2, //一个tab代表几个空格数，默认为80
  useTabs: false, //是否使用tab进行缩进，默认为false，表示用空格进行缩减
  singleQuote: true, //字符串是否使用单引号，默认为false，使用双引号
  semi: false, //行位是否使用分号，默认为true
  trailingComma: '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的代码格式进行校验
};

6. package.json增加命令

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

结果

终端执行

cnpm run lintfix

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

补充

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

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

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

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