目前在梳理團(tuán)隊(duì)項(xiàng)目時(shí)，發(fā)現(xiàn)很多代碼不規(guī)范的問(wèn)題，各式命名雜糅，風(fēng)格迥異，看著就像一鍋大雜燴，不利于代碼的可讀及維護(hù)。于是決定引入工具，采用eslint+prettier+husky+lint-staged方式，強(qiáng)制代碼格式的統(tǒng)一。因?yàn)轫?xiàng)目是使用create-react-app建立，因此在該腳手架上進(jìn)行修改。

eslint與prettier

eslint重在代碼質(zhì)量，雖然也可以格式化，但是不如prettier專(zhuān)業(yè)。因此，采用eslint來(lái)規(guī)范代碼，prettier來(lái)統(tǒng)一代碼格式。eslint與prettier的協(xié)作，可以參考Integrating with Linters#ESLint

配置

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

• eslint-config-prettier用于禁用與prettier沖突的規(guī)則。
• eslint-plugin-prettier將prettier當(dāng)做eslint規(guī)則來(lái)運(yùn)行。
• eslint-plugin-compat檢測(cè)使用的函數(shù)是否兼容瀏覽器。

二、移除 package.json 中的 eslintConfig 字段，創(chuàng)建?.eslintrc.js 文件，添加以下內(nèi)容：

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里面的內(nèi)容可根據(jù)團(tuán)隊(duì)規(guī)范自定義添加。

plugin:prettier/recommended需作為最后一個(gè)擴(kuò)展，它做了三件事：

1. 啟用“eslint-plugin-prettier”。
2. 在rules中設(shè)置“prettier/prettier”為error。
3. 繼承“eslint-config-prettier”的配置。

問(wèn)題

• 若是安裝了ESlint 6.X版本，在vscode出現(xiàn)類(lèi)似“Failed to load plugin 'compat' declared in 'test\mytest\.eslintrc.js': Cannot find module 'eslint-plugin-compat'”安裝插件失敗的信息提示，則可以通過(guò)將eslint版本降到5.X版本來(lái)解決。
• 出現(xiàn)該警告“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中加入以下內(nèi)容來(lái)解決。

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

husky和lint-staged

• husky:在 .git/hooks 中寫(xiě)入 pre-commit 等腳本激活鉤子，在 Git 操作時(shí)觸發(fā)。
• lint-staged:參考 Git 中 staged 暫存區(qū)概念，在每次提交時(shí)只檢查本次提交的文件。保證了不會(huì)修改別人的文件。

因?yàn)閔usky可以調(diào)用githooks，lint-staged允許我們對(duì)git中的staged files運(yùn)行腳本，兩者相加，可用于防止團(tuán)隊(duì)成員無(wú)視eslint的報(bào)錯(cuò)，將代碼風(fēng)格不符合規(guī)范的代碼提交到git倉(cāng)庫(kù)中。

配置

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

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

在package.json中添加以下內(nèi)容

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

鉤子工作流程說(shuō)明

當(dāng)開(kāi)發(fā)者執(zhí)行 git commit 操作時(shí)：

1. 由于安裝husky后其在.git/hooks中寫(xiě)入了pre-commit鉤子，該鉤子在 git commit 執(zhí)行時(shí)被觸發(fā)，執(zhí)行npm run lint-staged腳本（即lint-staged命令）；
2. lint-staged的配置，就是利用linters對(duì)暫存區(qū)的文件路徑應(yīng)用過(guò)濾規(guī)則，匹配的文件將執(zhí)行后面配置的任務(wù)，這里的任務(wù)就是調(diào)用項(xiàng)目中的prettier格式化文件，將格式化好的文件通過(guò)git add指令加入暫存區(qū)。調(diào)用項(xiàng)目中的eslint檢查文件，發(fā)現(xiàn)報(bào)錯(cuò)就終止流程，不再進(jìn)行commit操作。兩任務(wù)并行運(yùn)行。

參考自：
Formatting Code Automatically
eslint-plugin-prettier
husky
lint-staged
ESLint fails to load plugins when using ESLint 6.x
利用 git 鉤子做代碼提交前的檢查
React 15.x升級(jí)到16.x 運(yùn)行環(huán)境報(bào)警告的解決方案