淺談WEB前端規範化標準之ESlint

規範化標準

軟件開發須要多人開發,不一樣的開發者具備不一樣的編碼習慣和喜愛,不一樣的喜愛增長項目的維護成本，因此須要明確統一的標準,決定

了項目的可維護性,人爲的約定不可靠,因此須要專門的工具進行約束，而且能夠配合自動化工具進行檢查，這種專門的工具稱爲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,砥礪前行，加油！