規範化標準

軟體開發需要多人開發,不同的開發者具有不同的編碼習慣和喜好,不同的喜好增加專案的維護成本，所以需要明確統一的標準,決定

了專案的可維護性,人為的約定不可靠,所以需要專門的工具進行約束，並且可以配合自動化工具進行檢查，這種專門的工具稱為lint,

前端接觸最多的是ESLint，下面我們看下如何使用這些工具落實前端規範化操作。

ESLint介紹

目前最主流的JavaScript Lint工具 監測JS程式碼質量 ,統一開發者的編碼風格,同時ESLint可以幫助開發者提升編碼能力作用的一款工

具,是npm的一個模組。

ESLint安裝

yarn init --y

yarn add eslint --save-dev

yarn eslint --init （各種提示問題,我選擇的檢查語法,程式碼不合理，風格不統一等所有的規範,根據自己情況填寫完成後生成.eslintrc.js

配置檔案）//專案初始化

如下圖所示可以寫一些問題程式碼

執行yarn eslint xxx(上文定義的js檔案)，會有很多錯誤提示，執行--fix可以自動幫我們解決大部分問題（樣式問題）

yarn  eslint xx --fix

執行之後的結果提示有一個未使用的變數,還有一個未使用的方法，手動去掉之後，再次執行eslint --fix 結果無異常

ESlint 配置檔案.eslintrc.js解析

正常情況下,我們不需要手動配置，但是如果我們開啟或者關閉某些校驗規則的時候，就需要用到這個配置檔案一般情況下,JavaScri-

pt在不同的執行環境中是有不同的api可以被呼叫,很多都是以全域性成員的形式提供出來,一旦開啟代表所有的定義的成員都會被全域性使

用。例如window和document物件是執行在瀏覽器環境中,而在node.js環境中不存在這些物件,如下圖所示env的作用就是標記不同的運

行環境,ESlint會根據成員資訊判斷環境是否是可用的。

如上圖所示的env中如果把Browser設定為false,發現還是可以使用window和document還是可以使用這是因為在node_modules資料夾 

下資料夾下的eslint-config-standard（yarn eslint --init初始化中選擇使用standard規範）中的eslintrc.json中globals中設定了document

等為全域性只讀成員,所以.eslintrc.js中無論設定true和false都會導致失效。

extends:繼承共享配置

parserOptions:設定js的版本，程式碼低於該版本會無法執行

rules:[]//配置ESLint中每個規則的開啟或者關閉，屬性為內建屬性，屬性value值為off warn error

globals:定義另外的全域性變數,比如jquery，這樣就可以使用jquery,也不會報錯

ESlint配置註釋

Eslint只是一個規則,總有一兩個地方不適用的時候,這時候就可以通過註釋的方式,讓eslint跳過這行程式碼不解析,下面舉一個小小的例子

具體可以去看eslint文件看更多的註釋方法。

ESlint 結合webpack

Webpack打包之前是把遇到的模組交給對應的loader進行處理,eslint會通過loader的形式去整合到webpack中,這樣通過打包之前校驗代

碼,具體配置如下:

對於react解析jsx語法則需要一些額外的配置

yarn add eslint-plugin-react

ESlint檢查TypeScript

.eslintrc中需要配置針對ts的語法解析器,原因ts的很多語法是不同於js的

stylelint的使用

eslint是監測JS程式碼質量的工具,stylelint是檢測css及less,sass程式碼質量的工具。

yarn add stylelint --dev

yarn add stylelint-config-standard //安裝共享配置模組

yarn add stylelint-config-sass-guidelines --dev 針對sass模組的檢測

與eslint不同的是.stylelintrc.js 不是通過初始化建立的 而是需要手動建立,stylelint配置如下：

prettier簡介

prettier是目前最流行的一款修改程式碼樣式格式統一的工具,針對多種css,js,vue等檔案的格式

yarn add prettier --dev

yarn prettier . --write 即可覆蓋原始碼

Git hooks工作機制（簡單介紹）

很多時候多人合作開發的專案中,或許有人忘記使用lint工具檢測程式碼,就提交到git倉庫,可能會引發後續問題,有一種結合git倉庫的lint工

具,在提交程式碼前進行程式碼檢測。

首先新建個資料夾,git init後點擊.git資料夾裡面的hooks資料夾,複製pre-commit.sample檔案,改名為pre-commit,可以在裡面測試下寫下

shell指令碼語句輸出內容

touch demo.txt //新建測試檔案

vim demo.txt //填充demo檔案

git add .

git commit -m "xxxxx"

執行完上步操作之後,我們可以看到before code列印到控制檯當中,說明已經工作了,我們就可以想辦法在提交程式碼之前做lint操作。

ESLint 結合Git Hooks的使用

很多情況下,很多前端開發者不太擅長shell指令碼開發一些功能,而有些功能必須要使用的，所以有人開發了一個npm的工作模組Husky

可以實現Git Hooks的使用需求,下面來測試下Husky與一些相關配置的組合使用（需要把上文中測試建立的pre-commit檔案刪除掉）

yarn add husky --dev 首先安裝husky模組

package.json中定義不同的任務

配置好後,再次執行commit操作,會先進行檢查,如果 有問題會阻止提交程式碼操作,如果想檢查出問題之後新增格式化的功能，需要新增l

int-staged模組配合husky使用。

yarn add lint-staged --dev

package.json配置完成後再次執行commit操作，不但會對程式碼進行檢查,還會執行程式碼初始化的操作

/**************************************************************************************************************************************************/

2021,砥礪前行，加油！