统一团队协做的代码风格

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

eslint与prettier

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

配置

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

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

2、移除 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需做为最后一个扩展，它作了三件事：

1. 启用“eslint-plugin-prettier”。
2. 在rules中设置“prettier/prettier”为error。
3. 继承“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仓库中。

配置

1、安装husky和lint-staged
yarn add husky lint-staged --dev
2、在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 操做时：

1. 因为安装husky后其在.git/hooks中写入了pre-commit钩子，该钩子在 git commit 执行时被触发，执行npm run lint-staged脚本（即lint-staged命令）；
2. 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 运行环境报警告的解决方案