搭建Typescript+React專案模板(5) --- 團隊規範
這篇文章的每一步都基於 vscode 這款瀏覽器，如果你使用的不是 vscode ，那麼就需要自行整合相關外掛及其配置。 該文章只是簡單介紹各各程式碼檢測的流程，至於配置項則需要讀者自行前往對應的lint官網自己檢視、配置需要的。
前言
一般在專案中用到typescript作為開發工具的都是大中型專案，這樣的專案通常也不會只有一個人進行開發，所以在團隊內進行一些程式碼風格的統一和檢測能有效減少各種風格狂野的程式碼，然後再結合編輯器進行程式碼的自動格式化就能使得團隊程式碼風格保持一致。 在這塊中我們需要做的如下:
tslint stylelint npm script prettier pre-commit
使用 tslint 進行程式碼檢測
我們的專案因為大量使用 typescript ，所以使用的是 tslint 檢測工具，如果在你的專案中沒有用到 typescript ，那麼請使用 eslint 。
- 首先我們需要在
vscode中安裝外掛:
npm install -D tslint。 此外，因為我們有大量的.tsx檔案，所以還需要npm install -D tslint-react來指定針對.tsx語法的限制。 - 接著在根目錄下新建
tsling.json檔案，該檔案用於寫tslint配置檔案:
- 在
tslint.json中寫入配置，配置項參考請點選這裡:
extends是指tslint的擴充套件，第一個擴充套件是穩定且常規的tsling檢測標準，第二個則是針對.tsx檔案做的檢測。 - 測試一下是否生效: 我們將
no-console改為true測試一下:
console.log就可以知道這份配置表已經生效:
使用 stylelint 對 scss 檔案進行檢測
上一節針對ts(x)程式碼進行檢測，這節則介紹對scss檔案的程式碼型別進行檢測。
- 首先，在vscode安裝
stylelint這個外掛，該外掛可以對css、less、scss等型別的樣式表程式碼進行格式和樣式書寫順序上的檢測:
npm install -D stylelint。 - 我們在根目錄下建立
.stylelintrc.js檔案，然後安裝官方推薦的配置 ofollow,noindex">stylelint-config-standard 以及針對scss程式碼型別檢測的外掛 stylelint-scss :npm install -D stylelint-config-standard stylelint-scss - 然後在
.stylelintrc.js檔案中寫入配置項:
- 但是這時候針對
scss程式碼的檢測還是有問題的，它不能識別scss中例如@mixin、@include之類的語法:
新增 npm script 進行檢測
這一步主要利用 tslint 和 stylelint 附帶的命令列命令檢測專案中存在的程式碼規範問題，然後輸出到終端檢視：
- 去到
package.json中，在scripts中新增如下命令:
.tsx檔案也檢查.scss檔案。 - 然後再終端中輸入一次，就能看到報錯如下:
使用 prettier 進行程式碼格式化
除了上一節中手動定位並修改不規範的程式碼外，我們還可以依賴於 vscode 的外掛來進行符合我們規範的程式碼格式化，這個外掛推薦使用 prettier 。
- 首先在
vscode中安裝這個外掛:
- 然後去到使用者設定表中, 進到工作區設定進行配置，下圖是該模板的配置，當然你也可以自行配置需要的設定:
- 回到剛才錯誤的地方，只要我們一儲存就會自動格式化成正確的:
使用 pre-commit
在前面的篇幅中，我們有將 lint 命令新增進 npm script 中，但是這個命令如果要自己去執行我想很多人都會忘記，結果就會導致可能有不符合規範的程式碼被上傳到遠端程式碼倉庫中。 這種情況下我們可以做 pre-commit 進行程式碼強制檢測，也就是在 git commit 之前進行一次程式碼檢測，不符合規範不讓 commit 。 實現這個功能我們可以安裝 husky 這個外掛 npm install -D husky ，然後在 npm script 中新增命令就好了:
我這裡只是簡單地添加了程式碼檢測上的操作，也可以新增程式碼格式化的命令。