統一團隊協做的代碼風格

目前在梳理團隊項目時，發現不少代碼不規範的問題，各式命名雜糅，風格迥異，看着就像一鍋大雜燴，不利於代碼的可讀及維護。因而決定引入工具，採用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 運行環境報警告的解決方案