统一团队协作的代码风格

路人甲Java 2020-02-13

展开全文

目前在梳理团队项目时，发现很多代码不规范的问题，各式命名杂糅，风格迥异，看着就像一锅大杂烩，不利于代码的可读及维护。于是决定引入工具，采用eslint+prettier+husky+lint-staged方式，强制代码格式的统一。因为项目是使用create-react-app建立，因此在该脚手架上进行修改。

eslint与prettier

eslint重在代码质量，虽然也可以格式化，但是不如prettier专业。因此，采用eslint来规范代码，prettier来统一代码格式。eslint与prettier的协作，可以参考Integrating with Linters#ESLint

配置

一、安装prettier、eslint-config-prettier、eslint-plugin-prettier和eslint-plugin-compat。

eslint-config-prettier用于禁用与prettier冲突的规则。
eslint-plugin-prettier将prettier当做eslint规则来运行。
eslint-plugin-compat检测使用的函数是否兼容浏览器。

二、移除 package.json 中的 eslintConfig 字段，创建 .eslintrc.js 文件，添加以下内容：

module.exports  = {
    extends: [
        "react-app",
        "plugin:compat/recommended",
        "plugin:prettier/recommended"
    ],

    env: {
        browser:  true,
        node:  true,
        es6:  true
    },
    
    settings: {
        react: {
            version:  "999.999.999"
        }
    },

    rules: {
        "jsx-a11y/anchor-is-valid": "off",
        "spaced-comment": "error",
        "id-length": "error",
        "no-console": process.env.NODE_ENV  ===  "production"  ?  "error"  :  "off",
        "no-debugger": process.env.NODE_ENV  ===  "production"  ?  "error"  :  "off",
        "no-const-assign": "error",
        "new-cap": "error"
    }
};

rules里面的内容可根据团队规范自定义添加。

plugin:prettier/recommended需作为最后一个扩展，它做了三件事：

启用“eslint-plugin-prettier”。
在rules中设置“prettier/prettier”为error。
继承“eslint-config-prettier”的配置。

问题

若是安装了ESlint 6.X版本，在vscode出现类似“Failed to load plugin 'compat' declared in 'test\mytest\.eslintrc.js': Cannot find module 'eslint-plugin-compat'”安装插件失败的信息提示，则可以通过将eslint版本降到5.X版本来解决。
出现该警告“Warning: React version was set to "detect" in eslint-plugin-react settings, but the "react" package is not installed. Assuming latest React version for linting.”，则可在.eslintrc.js中加入以下内容来解决。

settings: {
    react: {
        version:  "999.999.999"
    }
},

husky和lint-staged

husky:在 .git/hooks 中写入 pre-commit 等脚本激活钩子，在 Git 操作时触发。
lint-staged:参考 Git 中 staged 暂存区概念，在每次提交时只检查本次提交的文件。保证了不会修改别人的文件。

因为husky可以调用githooks，lint-staged允许我们对git中的staged files运行脚本，两者相加，可用于防止团队成员无视eslint的报错，将代码风格不符合规范的代码提交到git仓库中。

配置

一、安装husky和lint-staged
yarn add husky lint-staged --dev
二、在scripts中添加

"lint-staged": "lint-staged",
"lint-staged:js": "eslint --ext .js,.jsx"

在package.json中添加以下内容

"husky": {
    "hooks": {
        "pre-commit": "npm run lint-staged"
    }
},
"lint-staged": {
    "**/*.{js,jsx,json}": [
        "prettier --write",
        "git add"
    ],
    "**/*.{js,jsx}": "npm run lint-staged:js"
},

钩子工作流程说明

当开发者执行 git commit 操作时：

由于安装husky后其在.git/hooks中写入了pre-commit钩子，该钩子在 git commit 执行时被触发，执行npm run lint-staged脚本（即lint-staged命令）；
lint-staged的配置，就是利用linters对暂存区的文件路径应用过滤规则，匹配的文件将执行后面配置的任务，这里的任务就是调用项目中的prettier格式化文件，将格式化好的文件通过git add指令加入暂存区。调用项目中的eslint检查文件，发现报错就终止流程，不再进行commit操作。两任务并行运行。

参考自：
Formatting Code Automatically
eslint-plugin-prettier
husky
lint-staged
ESLint fails to load plugins when using ESLint 6.x
利用 git 钩子做代码提交前的检查
React 15.x升级到16.x 运行环境报警告的解决方案