搭建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中添加命令就行了:

我這裏只是簡單地添加了代碼檢測上的操做，也能夠添加代碼格式化的命令。