風格與品位--3個前端代碼規範的工具

我們知道代碼規範的作用，我們也知道工具才能讓我們真正遵守代碼規範。本文簡紹三個工具EditorConfig，Prettier和eslint。前兩個工具幫你形成代碼風格，另外一個讓你提高代碼品味。最後提供typescript+eslint+prettier+airbnb+hooks的安裝和配置清單。

本文環境：Mac、VSCode

EditorConfig

第一個工具是EditorConfig，文字意譯就是編輯器配置，用於跨編輯器保持同一份代碼風格。常用於以下場景：假設你vscode空2格，如果粘貼一個新文件是空4格，此時新文件就保持4格，並不會自動改成編輯器默認的2格，editorConfig能幫你做到這一點。

使用editorconfig非常簡單，編輯器添加插件和項目根目錄添加文件：

// 在對應編輯器添加插件，vscode搜索EditorConfig for VS Code

touch .editorconfig

編輯器在啓動項目時就會讀取.editorconfig的配置，以下爲我個人配置，更多配置參考這裏。

root = true

[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[*.md]
trim_trailing_whitespace = false

Prettier

第二個工具是Prettier，如果說EditorConfig幫你統一編輯器風格，那Prettier幫你統一項目風格。Prettier擁有更多配置項，且能在發佈流程中自動檢查，幫助團隊統一代碼風格。

• 全局下載Prettier，風格需要穩定，全局有助於多項目保持統一風格；

  npm install -g prettier

• 安裝插件Prettier-Code formatter，要做到vscode中保存即使用，需要setting.json的{formatOnSave: true}，且配置對應的語言檢測機制，如下配置有"[javscript]..."，此時js文件保存時即檢查。（在任一js文件，按下快捷鍵 alt+shift+f 格式化代碼，setting.json會自動添加如下"[javascript]..."，其他語言類推）

  {
   "editor.formatOnSave": true,
   "[javascript]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   }
   // 以下配置爲開啓prettier-eslint，會導致prettier保存時不起作用
   // "prettier.eslintIntegration": true
  }

• 如果根目錄含有.prettierrc，該目錄的配置會覆蓋內置配置；想要使用cli觸發prettier，比如在項目提交的時候，或者是想批量改變原先文件，可以用--wrire指定要修改文件的類型，更多配置參考這裏。

  touch .prettierrc
  npm install --save-dev prettier
  prettier --write **.js

有了prettier，還用editorConfig嗎？

使用。一個是編輯器風格，一個是項目風格，作用不同。editorConfig起作用於敲代碼之前，prettier起作用於保存代碼之後；可以自己試驗它們的不同，如以下爲editorConfig空格設置爲4，prettiter空格設置爲2的場景，每次回車變成4格，每次保存又變成2格。

eslint

如果說editorConfig和prettier保證了你的風格，那eslint助你提高品位。eslint是代碼靜態分析工具，用於發現不符合規範的代碼。

• 安裝eslint

  npm i --save-dev eslint
  
  // 全局安裝eslint
  npm i -g eslint
  
  // 項目根目錄
  eslint --init

• 安裝插件ESlint，保存時自動檢查配置如下：

  // vscode/setting.json
  "eslint.alwaysShowStatus": true,
   "eslint.autoFixOnSave": true,
   "eslint.validate": [
     "javascript",
     "javascriptreact",
     "typescript",
     "typescriptreact"
   ]

• 項目中使用：

  //在package.json的scripts中添加
  "eslint": "eslint --fix ./"

使用建議：

• 不要在vscode開啓全局使用eslint：eslint規範的是代碼特性，且不說語言有可能進化，不同時空對代碼的要求也不同，不適合一刀切。
• 使用正規大廠的代碼的標準，比如說業界最有名的airbnb，這基本上是你使用eslint的意義所在。儘量不要使用自己定義的標準，我們往往因爲偷懶和理解不深，定的標準不夠全面。誠然airbnb有很多標準不適合當前項目，但是過度練習才能提高我們代碼質量，當你理解規則之後再刪減規則。比如說以下這條來自airbnb的規則，它不僅是規則，還是對代碼的理解。更多內容參考這裏

typescript+eslint+prettier+airbnb+hook配置

• 安裝prettiter、eslint和typescript-eslint

npm install --save-dev prettier

npm install --save-dev eslint
npm install --save-dev @typescript-eslint/parser // 將 TypeScript 轉換爲 ESTree，使 eslint 可以識別
npm install --save-dev @typescript-eslint/eslint-plugin // 打開或關閉的規則列表

• 安裝airbnb的typescript

npm install --save-dev eslint-config-airbnb-typescript
npm install --save-dev eslint-plugin-import
npm install --save-dev eslint-plugin-jsx-a11y
npm install --save-dev eslint-plugin-react

• 安裝commit代碼之前的提交工具：husky提供hooks機制，在git操作之前執行其他代碼；lint-staged利用git的staged特性，可以提取出本次提交的變動文件，每次只對修改的代碼做檢測。

npm install husky --save-dev
npm install lint-staged --save-dev

• 安裝hook檢查

npm install --save-dev eslint-plugin-react-hooks 

• 安裝eslint繼承prettier規則，這樣能統一以prettier規則爲主

npm install --save-dev eslint-config-prettier

• 配置：

// .eslintrc
touch .eslintrc

// parser必須配置；
// 使用typescript-eslint的推薦規則；
// 使用airbnb規則；檢測規則能識別縮寫。
{
  "parser": "@typescript-eslint/parser", 
  "plugins": ["@typescript-eslint"]
  "extends": [
    "plugin:@typescript-eslint/recommended"
    "airbnb-typescript"
    "plugin:prettier/recommended"
  ],
  "settings": {
    "import/resolver": {
      "node": {
        "extensions": [".js", ".jsx", ".ts", ".tsx"]
      }
    }
  }
  "rules": {
    "react-hooks/rules-of-hooks": "error",
    "react-hooks/exhaustive-deps": "warn", // 提示useEffect可能重複執行
    //不符合項目實際的將其關閉
    "import/prefer-default-export": "off",
    "import/no-extraneous-dependencies": "off"
  }
}

• 提交前檢查代碼，配置如下：

//在package.json中
 "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "**/*.{js,ts,tsx}": [
      "eslint --fix --ext .ts,.tsx,.js",
      "prettier --write",
      "git add"
    ],
  },

注意：

1. prettier的檢查在lint-staged的第二階段，故不需要通過eslint開啓prettier
2. 通過 --no-verify能跳過檢查：git commit --no-verify -m "跳過代碼檢測"

3. lint-staged 路徑說明：

   {
      "**/*.js": "工程下所有的 js 文件",
      "src/**/*.js": "src 文件夾下所有的 js 文件"
   }

4. 使用eslint還是tslint?由於Typescript團隊承諾使用eslint，故直接使用eslint更爲妥當，詳情。

規範鏈接：

typescript-eslint

airbnb

eslint-plugin-react

eslint-plugin-jsx-a11y

hooks-rules

另一個規則騰訊alloy

參考

1. https://stackoverflow.com/que...
2. http://zhangdajia.com/2018/04...
3. https://github.com/Microsoft/...
4. https://github.com/typescript...
5. https://github.com/typicode/h...
6. https://jsonz1993.github.io/2...
7. https://zhuanlan.zhihu.com/p/...