什么是EsLint?

• 在團(tuán)隊(duì)開發(fā)過程中，我們經(jīng)常會(huì)遇到這樣一種情況，比如一個(gè)語(yǔ)句后邊，有的人會(huì)加分號(hào);有的人認(rèn)為不加分號(hào)也可以；

• 在一個(gè)團(tuán)隊(duì)里，如果編程風(fēng)格不能得到統(tǒng)一的話，有的文件是這樣寫的，有的是那樣寫的，團(tuán)隊(duì)代碼維護(hù)上，就會(huì)很麻煩，這個(gè)時(shí)候我們就需要引入一些規(guī)范來(lái)約束我們的代碼

• EsLint就是這樣一種約束規(guī)范代碼的工具

使用步驟

1. 安裝 npm install eslint --save-dev (我用的是5.12.0版本)

2. 安裝好后還不行，還需要做一個(gè)配置文件，這個(gè)配置文件可以通過命令快速生成 npx eslint --init,運(yùn)行這個(gè)命令后，會(huì)問我們要怎么去配置我們的eslint呢？非常智能啊。。。；里邊有3個(gè)選擇，第一個(gè)的意思是，用一種比較流行的規(guī)范；第二個(gè)選擇的意思是，你問我答的形式來(lái)一步異步做配置；第三個(gè)的意思是，自己已經(jīng)有了JS文件去自動(dòng)的做配置；
   

   image.png

3. 在這里我們使用業(yè)界比較通用的方案，選擇第一項(xiàng)。然后我們會(huì)看到有3種不同的模板。分別是Aribnb公司的前端規(guī)范，標(biāo)準(zhǔn)的前端規(guī)范，谷歌的前端規(guī)范。我們選擇Aribnb公司的前端規(guī)范
   

   image.png

4. 然后會(huì)問我們，是否使用React，我這個(gè)例子是用React寫的，所以選是

   
   
   image.png

5. 然后會(huì)問，您希望配置文件采用什么格式，我們選JavaScript

   
   
   image.png

6. 然后提示我，airbnb需要更高版本的eslint,問是否要升級(jí)，選升級(jí)
   

   image.png

7. 然后會(huì)問當(dāng)，當(dāng)使用這個(gè)模板的時(shí)候，會(huì)有一些依賴需要安裝，是否現(xiàn)在安裝？選是

   
   
   image.png

8. 安裝好以后，我們的項(xiàng)目目錄里，就會(huì)多一個(gè).eslintrc.js文件；里邊內(nèi)容的意思就是，整個(gè)工程下邊要使用eslint對(duì)代碼進(jìn)行規(guī)范，用的哪個(gè)規(guī)范呢，就是aribnb公司的規(guī)范
   

   image.png

安裝好了以后，該怎么使用呢？ 不需要webpack的情況下，有兩種方式，簡(jiǎn)單的和復(fù)雜的

復(fù)雜的使用方式--- 命令行通過輸入命令npx eslint xxxx，然后在命令行提示

1. 假如我們現(xiàn)在，相對(duì)src目錄下的代碼做代碼檢測(cè)，看下整個(gè)文件夾里的代碼是否符合aribnb公司的前端規(guī)范；我們可以運(yùn)行 npx eslint src;整個(gè)命令的意思是，通過eslint這個(gè)工具，幫我們檢測(cè)src目錄下的代碼
2. 然后會(huì)有很多提示
   
   image.png
   
   3.我們?cè)貳slint里的一個(gè)parser(解析器),我們可以到Eslint官網(wǎng)，找到Configuring
   
   image.png
3. 然后找到parser，官網(wǎng)默認(rèn)使用的是一個(gè)expree的解析器，我們可以給parser配置一個(gè)目前用的比較多的解析器babel-eslint,我們先安裝一下npm install babel-eslint --save-dev,安裝好后，配置一下
   
   image.png
4. 然后保存重新運(yùn)行一下npx eslint src，然后我們可以看到，哪個(gè)文件里，第幾行，第幾列有問題；1:42的意思是第一行第42列,然后針對(duì)具體的問題再去解決
   
   image.png

簡(jiǎn)單的方式---編輯器安裝ESLint插件，直接在代碼里提示

1. 當(dāng)然，這么多的問題。我們不可能一個(gè)一個(gè)看，一個(gè)一個(gè)去配置解決。我們可以通過在編輯器(我的是VSCode)，安裝一個(gè)插件來(lái)解決，這個(gè)插件就是ESLint
   
   image.png
   
   2.安裝好之后，我們?cè)僦匦麓蜷_文件夾，我們可以看到，編輯器已經(jīng)自動(dòng)的把寫的不規(guī)范的代碼給標(biāo)紅了。
   
   image.png
   
   3.然后我們可以把鼠標(biāo)放在標(biāo)紅的代碼上看到具體是什么問題，該怎么解決
   
   image.png
2. 因?yàn)?code>Aribnb公司的前端規(guī)范比較嚴(yán)格，有的時(shí)候，我們不想遵循它的某項(xiàng)規(guī)則，那我們可以自己重新配置一下某些規(guī)則，去覆蓋它的一些原有的規(guī)則。
   
   image.png
   
   
   image.png

3.規(guī)則被覆蓋掉以后，我們可以看到，這一行原來(lái)的報(bào)錯(cuò)(Component should be written as a pure function組件應(yīng)該作為純函數(shù)編寫)不見了。

image.png

4. 繼續(xù)往下看，會(huì)看到提示我們Expected indentation of 2 spaces but found 1 tab (應(yīng)縮進(jìn)2個(gè)空格，但找到1個(gè)制表符)，我們可以把縮進(jìn)改為2個(gè)空格，而不是原來(lái)的一個(gè)tab縮進(jìn)
   
   image.png
5. 下邊還有提示 JSX not allowed in files with extension '.js(擴(kuò)展名為“.js”的文件中不允許使用JSX),這個(gè)要求，我們不想遵循，也可以修改一下
   
   image.png
   
   
   image.png
6. 還有一些其他的提示，比如jsx語(yǔ)法來(lái)說(shuō)，path屬性要加雙引號(hào)；還有就是return 的結(jié)果后要加一個(gè)分號(hào)，這些都是aribnb公司的前端規(guī)范，這就是修改后的
   
   image.png
   
   7.最后我們還發(fā)現(xiàn)，有一個(gè)document報(bào)錯(cuò)，document實(shí)際上是一個(gè)全部變量，如果直接使用了全部變量，也會(huì)告訴我們這樣不對(duì)，我還需要配置一下
   
   image.png
   
   
   image.png
   
   
   image.png
   
   8.然后，我們可以看下list.js,發(fā)現(xiàn)里邊也有報(bào)錯(cuò)，是關(guān)于換行符的，原因是因?yàn)?code>在各操作系統(tǒng)下，文本文件所使用的換行符是不一樣的。UNIX/Linux 使用的是 0x0A（LF），早期的 Mac OS 使用的是0x0D（CR），后來(lái)的 OS X 在更換內(nèi)核后與 UNIX 保持一致了。但 DOS/Windows 一直使用 0x0D0A（CRLF）作為換行符。,我們可以重寫linebreak-style規(guī)則，來(lái)強(qiáng)制執(zhí)行統(tǒng)一的行結(jié)尾，而不受操作系統(tǒng)或整個(gè)代碼庫(kù)中使用的編輯器的影響
   
   image.png
   
   
   image.png
   
   
   image.png

這里會(huì)遇到一個(gè)問題，假設(shè)團(tuán)隊(duì)另外一個(gè)人，也是用的vscode編輯器，但是他的編輯器，并沒有安裝ESLint插件(或者安裝不了)，他寫的代碼也就沒有提示哪里不符合規(guī)范，他也就無(wú)從知道自己寫的代碼是否規(guī)范，所以這種單純靠瀏覽器插件來(lái)確保團(tuán)隊(duì)代碼開發(fā)質(zhì)量的方法是不靠譜的，誰(shuí)能保證團(tuán)隊(duì)每個(gè)小伙伴都安裝了插件呢？至于另外一種命令行方法，比較麻煩，就不說(shuō)了

這個(gè)時(shí)候，我們可以在webpack中把eslint結(jié)合進(jìn)去，從而讓團(tuán)隊(duì)所有伙伴即使編輯器沒有裝插件，也可以看到代碼中不符合規(guī)范的地方;步驟如下：

1. 我們需要安裝一個(gè)eslint-loader ,命令是npm install eslint-loader --save-dev
2. 安裝好以后，我們要配置，一般情況下，我們會(huì)對(duì)JS文件進(jìn)行檢測(cè)，所以我們需要修改我們的webpack.config.js配置
   
   image.png
   
   
   image.png
3. 配置好以后，啟動(dòng)服務(wù)器npm run start,我們可以看到，它會(huì)幫我們執(zhí)行一下eslint-loader，并且在終端告訴我們home.js里的代碼是有問題的。
   
   image.png
4. 如果我們還是在命令行里看提示，那么跟剛才我們直接通過npx eslint src這種方法也沒有區(qū)別了，也不是很直觀 ，這個(gè)時(shí)候，我們可以在webpack.config.js里的devServer里配置一個(gè)overlay參數(shù)
   
   image.png
5. 這個(gè)配置好以后。當(dāng)我們?nèi)ミ\(yùn)行webpack-dev-server去做打包的時(shí)候，一旦過程中出現(xiàn)代碼規(guī)范問題，它會(huì)在瀏覽器上談一個(gè)提示層，現(xiàn)在我們重新運(yùn)行npm run start
   
   image.png
6. 通過上圖我們可以很直觀的看到哪里出了問題，當(dāng)我們解決一個(gè)問題，提示就會(huì)少一個(gè)；所以，即便我們的編輯器沒有eslint插件，但是借助webpack里eslint-loader的配置，我們還是可以快速定位代碼里，關(guān)于代碼規(guī)范的問題。方便我們快速解決問題。

實(shí)際上vue的腳手架工具里，當(dāng)我們代碼寫的不規(guī)范的時(shí)候，也會(huì)給我們一些eslint的提示；這種提示做起來(lái)非常簡(jiǎn)單，只要在工程目錄下，安裝eslint，然后再安裝eslint-loader，然后在webpack.config.js里的derServer配置一個(gè)overlay,再去module里配置一個(gè)eslint-loader就可以實(shí)現(xiàn)在頁(yè)面上提示代碼不規(guī)范的功能了

eslint-loader還有很多其他的配置，這些配置，我們可以通過webpack官網(wǎng)loader里查看

1.比如fix配置,下邊這配置的意思是，在eslint做檢測(cè)時(shí)候，如果代碼里有一些淺顯的錯(cuò)誤，很容易發(fā)現(xiàn)的問題，它會(huì)自動(dòng)幫我們把代碼修復(fù)掉的

image.png

2. catch參數(shù)，可以降低eslint對(duì)打包過程性能的損耗，因?yàn)槲覀兣渲昧?code>eslint-loader，每次打包的時(shí)候。對(duì)JS文件都會(huì)去分析是否符合規(guī)范，這會(huì)降低打包速度。所以配置這個(gè)參數(shù)后。會(huì)稍微提升我們打包的速度
   
   image.png

真正的項(xiàng)目中，做webpack配置的時(shí)候的最佳實(shí)踐

• 在真是的項(xiàng)目里，一般不建議使用eslint-loader，因?yàn)橛昧怂豢杀苊獾木蜁?huì)降低打包速度；那要怎么做呢？
  寫代碼的時(shí)候，隨便寫，當(dāng)要把代碼提交到git倉(cāng)庫(kù)的時(shí)候，git里有一些鉤子，在git提交代碼的時(shí)候，對(duì)代碼進(jìn)行eslint的檢測(cè)。在這個(gè)鉤子里，通過命令行去運(yùn)行eslint src,如果代碼不符合規(guī)范，會(huì)在命令行禁止我們把代碼提交到git倉(cāng)庫(kù)里，當(dāng)我們看到命令行提示的錯(cuò)誤，再去改對(duì)應(yīng)的問題。如果所有的問題都解決了，才可以把代碼提交到git倉(cāng)庫(kù)里
• 但是這種做法，就沒有辦法實(shí)現(xiàn)圖形交互式的eslint的提示(也就是頁(yè)面上的提示)，這種方式不夠便捷

所以，具體要怎么做，還是要看實(shí)際情況，如果很影響打包速度，那么我們就要犧牲一些便捷性。