什么是EsLint?

• 在團隊開發(fā)過程中懊纳，我們經(jīng)常會遇到這樣一種情況，比如一個語句后邊松逊，有的人會加分號;有的人認(rèn)為不加分號也可以；

• 在一個團隊里肯夏，如果編程風(fēng)格不能得到統(tǒng)一的話经宏，有的文件是這樣寫的，有的是那樣寫的驯击，團隊代碼維護上烁兰，就會很麻煩，這個時候我們就需要引入一些規(guī)范來約束我們的代碼

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

使用步驟

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

2. 安裝好后還不行徊都，還需要做一個配置文件沪斟，這個配置文件可以通過命令快速生成 npx eslint --init,運行這個命令后，會問我們要怎么去配置我們的eslint呢暇矫？非常智能啊主之。。李根。槽奕；里邊有3個選擇，第一個的意思是房轿，用一種比較流行的規(guī)范粤攒；第二個選擇的意思是所森，你問我答的形式來一步異步做配置；第三個的意思是夯接，自己已經(jīng)有了JS文件去自動的做配置焕济；
   

   image.png

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

   image.png

4. 然后會問我們粒蜈，是否使用React顺献，我這個例子是用React寫的，所以選是

   
   
   image.png

5. 然后會問枯怖，您希望配置文件采用什么格式注整，我們選JavaScript

   
   
   image.png

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

   image.png

7. 然后會問當(dāng)肿轨，當(dāng)使用這個模板的時候，會有一些依賴需要安裝蕊程，是否現(xiàn)在安裝椒袍？選是

   
   
   image.png

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

   image.png

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

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

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

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

1. 當(dāng)然豁鲤，這么多的問題秽誊。我們不可能一個一個看，一個一個去配置解決琳骡。我們可以通過在編輯器(我的是VSCode)锅论，安裝一個插件來解決，這個插件就是ESLint
   
   image.png
   
   2.安裝好之后楣号，我們再重新打開文件夾最易，我們可以看到，編輯器已經(jīng)自動的把寫的不規(guī)范的代碼給標(biāo)紅了炫狱。
   
   image.png
   
   3.然后我們可以把鼠標(biāo)放在標(biāo)紅的代碼上看到具體是什么問題藻懒，該怎么解決
   
   image.png
2. 因為Aribnb公司的前端規(guī)范比較嚴(yán)格，有的時候视译，我們不想遵循它的某項規(guī)則嬉荆，那我們可以自己重新配置一下某些規(guī)則，去覆蓋它的一些原有的規(guī)則酷含。
   
   image.png
   
   
   image.png

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

image.png

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

這里會遇到一個問題阐枣，假設(shè)團隊另外一個人马靠，也是用的vscode編輯器奄抽，但是他的編輯器蔼两，并沒有安裝ESLint插件(或者安裝不了)，他寫的代碼也就沒有提示哪里不符合規(guī)范逞度，他也就無從知道自己寫的代碼是否規(guī)范额划，所以這種單純靠瀏覽器插件來確保團隊代碼開發(fā)質(zhì)量的方法是不靠譜的，誰能保證團隊每個小伙伴都安裝了插件呢档泽？至于另外一種命令行方法俊戳，比較麻煩，就不說了

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

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

實際上vue的腳手架工具里鲫咽，當(dāng)我們代碼寫的不規(guī)范的時候签赃，也會給我們一些eslint的提示；這種提示做起來非常簡單分尸，只要在工程目錄下锦聊，安裝eslint，然后再安裝eslint-loader箩绍，然后在webpack.config.js里的derServer配置一個overlay,再去module里配置一個eslint-loader就可以實現(xiàn)在頁面上提示代碼不規(guī)范的功能了

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

1.比如fix配置,下邊這配置的意思是材蛛，在eslint做檢測時候圆到，如果代碼里有一些淺顯的錯誤，很容易發(fā)現(xiàn)的問題卑吭，它會自動幫我們把代碼修復(fù)掉的

image.png

2. catch參數(shù)芽淡，可以降低eslint對打包過程性能的損耗，因為我們配置了eslint-loader豆赏，每次打包的時候挣菲。對JS文件都會去分析是否符合規(guī)范，這會降低打包速度河绽。所以配置這個參數(shù)后己单。會稍微提升我們打包的速度
   
   image.png

真正的項目中，做webpack配置的時候的最佳實踐

• 在真是的項目里耙饰，一般不建議使用eslint-loader纹笼，因為用了它，不可避免的就會降低打包速度苟跪；那要怎么做呢廷痘？
  寫代碼的時候蔓涧，隨便寫，當(dāng)要把代碼提交到git倉庫的時候笋额，git里有一些鉤子元暴，在git提交代碼的時候，對代碼進(jìn)行eslint的檢測兄猩。在這個鉤子里茉盏，通過命令行去運行eslint src,如果代碼不符合規(guī)范，會在命令行禁止我們把代碼提交到git倉庫里枢冤，當(dāng)我們看到命令行提示的錯誤鸠姨，再去改對應(yīng)的問題。如果所有的問題都解決了淹真，才可以把代碼提交到git倉庫里
• 但是這種做法讶迁，就沒有辦法實現(xiàn)圖形交互式的eslint的提示(也就是頁面上的提示)，這種方式不夠便捷

所以核蘸，具體要怎么做巍糯，還是要看實際情況，如果很影響打包速度客扎，那么我們就要犧牲一些便捷性祟峦。