解决的问题

• 统一团队代码规范，解决一些潜在bug

修改流程

• 安装公用规则包

npm install eslint-config-tongdun --save-dev

• 升级eslint版本到8以上

npm install eslint@^8.13.0 --save-dev

• 在package.json 同级目录新增.eslintrc(如已有则修改里面内容即可)

{
 // react工程使用["tongdun/react"] vue工程使用["tongdun/vue"]
 // typescript项目可以在后面添加typescript规则
 // "extends":["tongdun/react", "tongdun/typescript"],
    "extends":["tongdun/react"],
 // 这里可以覆盖规则包里面的规则，比如默认每个函数最长不超过200，如果老项目超过了，就可以自定义修改
    "rules": {
        // 函数最长是300行
        "max-lines-per-function": ["error", { "max": 300, "skipBlankLines": true, "skipComments": true }],
    }
}

• vscode安装eslint插件，同时在设置里面配置信息如下，可以在编写代码的时候自动帮忙fixed一些问题

"editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.fixAll": true
}

• 在package.json的scripts里面增加命令

// --max-warnings 0 这个0可以改为其他数字，但是最好还是将问题修复掉
"eslint-fixed": "npx eslint --max-warnings 0 --fix --ext .js,.jsx,.ts,.tsx,.vue ./src"

• eslint 自动修复,执行以下命令

npm run eslint-fixed

• 执行完以上步骤，eslint会将基础的问题，比如空格/分号/引号/import顺序等问题自动修复，另外一些需要自己手动修复。

自定义eslint规则

• 安装插件

npm install eslint-plugin-td-rules-plugin --save-dev

• 使用方法,在.eslintrc中配置如下

{
    "extends": ["tongdun/react"],
    "plugins": ["td-rules-plugin"],
    "rules": {
        // import 超过3个..建议使用别名
        "td-rules-plugin/js-use-alias-path": 1,
        // interface 名称大写字母开头
        "td-rules-plugin/ts-interface-caps": 1
    }
}