搭建Typescript+React專案模板(5) --- 團隊規範

相關文章和閱讀順序

1.專案初始化

2.提升開發體驗

3.整理專案和雜項

4.專案打包

5.團隊規範

專案地址

注意

這篇文章的每一步都基於vscode這款編輯器，如果你使用的不是vscode，那麼就需要自行整合相關外掛及其配置。 該文章只是簡單介紹各各程式碼檢測的流程，至於配置項則需要讀者自行前往對應的lint官網自己檢視、配置需要的。

前言

一般在專案中用到typescript作為開發工具的都是大中型專案，這樣的專案通常也不會只有一個人進行開發，所以在團隊內進行一些程式碼風格的統一和檢測能有效減少各種風格狂野的程式碼，然後再結合編輯器進行程式碼的自動格式化就能使得團隊程式碼風格保持一致。 在這塊中我們需要做的如下:

1. 使用tslint做程式碼檢測
2. 使用stylelint做程式碼檢測
3. 新增npm script進行檢測
4. 使用prettier進行程式碼格式化
5. 使用pre-commit

使用tslint進行程式碼檢測

我們的專案因為大量使用typescript，所以使用的是tslint檢測工具，如果在你的專案中沒有用到typescript，那麼請使用eslint。

1. 首先我們需要在vscode中安裝外掛:

   

   然後在專案中安裝npm install -D tslint。 此外，因為我們有大量的.tsx檔案，所以還需要npm install -D tslint-react來指定針對.tsx語法的限制。
2. 接著在根目錄下新建tsling.json檔案，該檔案用於寫tslint配置檔案:

   

3. 在tslint.json中寫入配置，配置項參考請點選這裡:

   

   這份配置項中，上面的extends是指tslint的擴充套件，第一個擴充套件是穩定且常規的tsling檢測標準，第二個則是針對.tsx檔案做的檢測。
4. 測試一下是否生效: 我們將no-console改為true測試一下:

   

   然後在元件中寫一個console.log就可以知道這份配置表已經生效:

   

使用stylelint對scss檔案進行檢測

上一節針對ts(x)程式碼進行檢測，這節則介紹對scss檔案的程式碼型別進行檢測。

1. 首先，在vscode安裝stylelint這個外掛，該外掛可以對css、less、scss等型別的樣式表程式碼進行格式和樣式書寫順序上的檢測:

   

   記得還需要npm install -D stylelint。
2. 我們在根目錄下建立.stylelintrc.js檔案，然後安裝官方推薦的配置stylelint-config-standard以及針對scss程式碼型別檢測的外掛stylelint-scss: npm install -D stylelint-config-standard stylelint-scss
3. 然後在.stylelintrc.js檔案中寫入配置項:

   

4. 但是這時候針對scss程式碼的檢測還是有問題的，它不能識別scss中例如@mixin、@include之類的語法:

   

   所以還需要手動寫一些規則覆蓋掉針對這類語法的檢測使其不報錯:

   

   

新增npm script進行檢測

這一步主要利用tslint和stylelint附帶的命令列命令檢測專案中存在的程式碼規範問題，然後輸出到終端檢視：

1. 去到package.json中，在scripts中新增如下命令:

   

   這條命令既檢查.tsx檔案也檢查.scss檔案。
2. 然後再終端中輸入一次，就能看到報錯如下:

   

   然後定位到檔案中去修改即可。

   

使用prettier進行程式碼格式化

除了上一節中手動定位並修改不規範的程式碼外，我們還可以依賴於vscode的外掛來進行符合我們規範的程式碼格式化，這個外掛推薦使用prettier。

1. 首先在vscode中安裝這個外掛:

   

2. 然後去到使用者設定表中, 進到工作區設定進行配置，下圖是該模板的配置，當然你也可以自行配置需要的設定:

   

3. 回到剛才錯誤的地方，只要我們一儲存就會自動格式化成正確的:

   

   

使用pre-commit

在前面的篇幅中，我們有將lint命令新增進npm script中，但是這個命令如果要自己去執行我想很多人都會忘記，結果就會導致可能有不符合規範的程式碼被上傳到遠端程式碼倉庫中。 這種情況下我們可以做pre-commit進行程式碼強制檢測，也就是在git commit之前進行一次程式碼檢測，不符合規範不讓commit。 實現這個功能我們可以安裝husky這個外掛npm install -D husky，然後在npm script中新增命令就好了:

我這裡只是簡單地新增了程式碼檢測上的操作，也可以新增程式碼格式化的命令。