项目组 eslint 统一配置及疑难解决

背景

项目组前端代码eslint久失维护，大家有的人有代码规范，有的人没有。新来的代码规范也是从老的手里copy一份。每个人eslint插件的版本、配置、代码项均不同。导致改代码的时候，为了避免自动fix带来的大量代码改动，不得不暂时关闭eslint，改完后，无规则校验上库。代码规范缺乏校验，上库代码质量日益下降。

第一步

按照可信认证规则（标准代码规范）配置eslintrc文件，插件的配置自不必说。为了支持js/ts/jsx/tsx ，需要安装eslint的4个插件,配置在plugin中。注意为了支持ts，parser需要指定为@typescript-eslint/parser。否则无法校验ts规则。

• eslint-react
• eslint-react-hooks
• eslint-typescript
• eslint-@typescript-eslint

编写eslint fix脚本，全局fix项目中的代码。共计上库改动600余个文件。

eslintrc.js

module.exports = {
   
    'root':true,
    'env': {
   
        'browser': true,
        'es6': true,
        'node': true
    },
    'globals': {
   
        'Atomics': 'readonly',
        'SharedArrayBuffer': 'readonly'
    },
    "parser": "@typescript-eslint/parser",
    'parserOptions': {
   
        'ecmaFeatures': {
   
            'jsx': true
        },
        'ecmaVersion': 6,
        'sourceType': 'module'
    },
    'plugins': [
        'react',
        "react-hooks",
        "typescript",
        "@typescript-eslint"
    ],
    'settings':{
   
        "react": {
   
            "version": "16.13.0", 
          },
    },
    "overrides": [
        {
   
            "files":["*.tsx","*.jsx"],
            "rules": {
   
                "react/jsx-indent-props": 0, //禁用验证JSX中的props缩进
            }
        }
    ],
  //覆盖规则
    'rules': {
   
        'indent': [//缩进
            'error',
            4
        ],
        'semi': [//语句强制分号结尾
            'error',
            'always'
        ],
        //参数一：0或‘off’ 关闭规则，1或‘warn’  规则等级警告，2或者‘error’  规则等级错误
        //参数二：可以使用默认，也可以根据文档自定义
        'no-unused-vars': 0,//禁止出现未使用过的变量
        'no-console': 1,//建议不使用console
        'no-var': 1,//建议使用let或const替代var
        'object-shorthand': 2,//对象属性、方法简写语法