使用eslint+prettier來構建前端項目提交規範

前端項目規範化的背景

團隊多人協同開發，爲了保證代碼質量，對代碼制定規範化的標準是必須的，在此分享下，目前我們的項目採用的規範化手段

一、代碼校驗以及提交過程中的配置

1. 在package.json中配置pre-commit
   pre-commit鉤子可以在 git commits 之前運行一段腳本，比如在commit代碼之前運行eslint，校驗失敗則代碼提交失敗，校驗成功則允許提交代碼，這裏我們設置一組規則lint-staged，在commit之前運行該規則。

   "pre-commit": [
           "lint-staged"
      ],
   

2. 在package.json中配置lint-staged
   lint-staged主要是爲了保證，每次只對當前修改後的文件進行掃描，即進行git add加入到stage區的文件進行掃描即可，完成對增量代碼進行檢查。如何實現呢？這裏就需要依賴lint-staged包，使用到lint-staged工具來識別被加入到stage區文件。

    "lint-staged": {
           "{src,routes}/**/*.{js,jsx,ts,tsx}": [
               "eslint",
               "prettier --write",
               "git add"
           ]
       },
   

3. prettier 配置文件
   prettier配置可以以.prettier.js的文件放在項目中，也可以通過在package.json中配置"prettier"字段，引入配置文件，下面是我們prettier的規範

   module.exports = {
       // 一行最多 100 字符
       printWidth: 100,
       // 使用 4 個空格縮進
       tabWidth: 4,
       // 不使用縮進符，而使用空格
       useTabs: false,
       // 行尾需要有分號
       semi: false,
       // 使用單引號
       singleQuote: true,
       // 對象的 key 僅在必要時用引號
       quoteProps: 'as-needed',
       // jsx 不使用單引號，而使用雙引號
       jsxSingleQuote: false,
       // 末尾不需要逗號
       trailingComma: 'none',
       // 大括號內的首尾需要空格
       bracketSpacing: true,
       // jsx 標籤的反尖括號需要換行
       jsxBracketSameLine: false,
       // 箭頭函數，只有一個參數的時候，也需要括號
       arrowParens: 'always',
       // 每個文件格式化的範圍是文件的全部內容
       rangeStart: 0,
       rangeEnd: Infinity,
       // 不需要寫文件開頭的 @prettier
       requirePragma: false,
       // 不需要自動在文件開頭插入 @prettier
       insertPragma: false,
       // 使用默認的折行標準
       proseWrap: 'preserve',
       // 根據顯示樣式決定 html 要不要折行
       htmlWhitespaceSensitivity: 'css',
       // 換行符使用 lf
       endOfLine: 'lf'
   };
   
   

4. eslint規範基於騰訊的 eslint-config-alloy ; eslint-config-alloy文檔.

   module.exports = {
       extends: ['@ctrip/eslint-config-travel'],
       env: {
           // 這裏填入你的項目用到的環境
           // 它們預定義了不同環境的全局變量，比如：
           //
           // browser: true,
           // node: true,
           // mocha: true,
           // jest: true,
           // jquery: true
       },
       globals: {
           // 這裏填入你的項目需要的全局變量
           // false 表示這個全局變量不允許被重新賦值，比如：
           //
           // myGlobal: false
       },
       rules: {
           // 個性化配置，會覆蓋默認配置
       }
   };
   
   

   項目中.eslintrc配置如上，extends是我們存放eslint規則的包，它依賴eslint-config-alloy，在我們的@ctrip/eslint-config-travel包基礎上，我們分別擴展了在不同平臺：h5, rn; 不同語言：ts，js，react下的規則。下面是我們eslint規則包的所有依賴：

   	 	"@typescript-eslint/eslint-plugin": "^2.8.0",
           "@typescript-eslint/parser": "^2.8.0",
           "eslint": "^6.6.0",
           "eslint-config-alloy": "^3.2.0",
           "eslint-plugin-react": "^7.16.0",
           "eslint-plugin-react-hooks": "^2.3.0",
           "eslint-plugin-react-native": "^3.8.1"
   
   

5. 代碼提交規則

   代碼提交message本來是寫什麼都可以的，但是commit message 應該清晰明瞭，說明本次提交的目的。規範的commit message 有助於我們瀏覽提交信息，還能生成changelog。我們採用了使用最廣泛的Angular 規範。

   有了提交規範，但是不能保證開發人員在commit代碼的同時一定是按照規範，書寫commit messagede ，所有我們需要在commit前對開發人員的commit message進行校驗，目前github上存在很多用於檢查 Node 項目的 Commit message 的庫，比如validate-commit-msg.js，也可以用node寫自己的校驗 Commit message 的腳本文件。

   把這個腳本加入 Git 的 hook，它在你使用git提交代碼的時候，會自動檢查 Commit message 是否合格。

6. Commitizen
   Commitizen是一個撰寫合格 Commit message 的工具。它提供開發人員在提交代碼書寫commit message 的交互，以後凡是用到git commit命令，一律改爲使用git cz。這時，就會出現選項，用來生成符合格式的 Commit message。
   
   具體使用可以參考：https://www.jianshu.com/p/d264f88d13a4。

7. ** 生成 Change log**
   如果你的所有 Commit 都符合 Angular 格式，那麼發佈新版本時， Change log 就可以用腳本自動生成，具體使用參考：https://www.jianshu.com/p/d264f88d13a4。

二、代碼校驗以及提交的執行流程

1. 使用git add . 增加代碼到暫存區
2. 使用git commit -m ‘commit message’ 提交代碼
3. package中註冊的鉤子函數pre-commit被調用，執行lint-staged；
4. lint-staged 取得在package.json中配置的任務，依次執行(esLint 和 prettier), 同時，在git hook下添加的commit message校驗規則也會對commit message的格式進行校驗，校驗完成並且沒有任何一個步驟報錯，代碼就成功被提交，完成commit，否則報錯，等待修改之後重新提交。

三、參考文獻：

Commit message 和 Change log 編寫指南
使用git鉤子對提交代碼進行檢查(pre-commit)
https://juejin.im/post/5c67fcaae51d457fcb4078c9
Commitizen的安裝和使用（標準化Git的Commit Message）