ESLint：你認識我嗎
ESLint是一個語法規則和程式碼風格的檢查工具。
和學習所有程式語言一樣，想要入門ESLint，首先要去它的官網看看：https://eslint.org/。
ESLint的版本問題
目前ESLint的穩定版本是v4.19.1，如果你看過ESLint的官方文件，就會知道官網推出了ESLint v5.0.0-alpha.1，這是ESLint的一個主要版本升級。
由於這是預釋出版本，ESLint尚未準備好用於生產，因此我們不會通過npm自動升級。next安裝時必須指定標籤：
$ npm i eslint@next --save-dev ，這句命令從 npm 倉庫安裝了 ESLint CLI，如果想嘗試下新功能的童鞋可以安裝搗鼓一番。
為什麼我們要在專案中使用ESLint
ESLint可以校驗我們寫的程式碼，給程式碼定義一個規範，專案裡的程式碼必須按照這個規範寫。
加入ESLint有非常多的好處，比如說可以幫助我們避免一些非常低階的錯誤，一些格式上的問題導致我們在執行生產環境的時候出現一些不明所以的報錯。還有就是在跟團隊協作的時候，每個人都保持同一個風格進行程式碼書寫，這樣團隊內部相互去看別人的程式碼的時候，就可以更容易的看懂。
ESLint實戰小技巧全揭祕
那麼ESLint如何去使用呢？首先我們要去安裝它：
$ npm install eslint
複製程式碼至於是本地安裝還是全域性安裝，你們可以看專案需求。在這裡，我們就不用官方提供的 eslint --init 來生成我們的配置檔案了，後面我們會手動配置。規則也不用我們自己去指定，想看更多規則可以前往官網瞭解，這裡只提供在公司專案中快速上手ESLint的技巧，以及在實戰專案中碰到的問題的解決方案。
用別人的輪子開發自己的專案，省時省力
第一個小技巧來了，現在網上有個叫eslint-config-standard的標準的ESLint規則，我們繼承這個規則就可以了。這樣的話我們專案裡按照這個標準規則去開發程式碼就OK了。
首先我們要去安裝ESLint所要用到的一大堆東西：
$ npm i eslint eslint-config-standard eslint-plugin-standard eslint-plugin-promise eslint-plugin-import eslint-plugin-node -D
複製程式碼這些都是eslint-config-standard這個npm包裡推薦我們去安裝的，因為它的校驗規則要依賴於這些plugins進行去驗證。
然後，我們要去專案的根目錄裡面手動建立一個.eslintrc檔案，然後在裡面敲入以下程式碼：
{
"extends": "standard"
}
複製程式碼執行完以上步驟，我們就可以使用ESLint這個工具來校驗專案裡的程式碼。
在Vue專案裡，.vue檔案寫的是類似於html的格式，不是標準的JavaScript檔案，ESLint無法直接識別.vue檔案裡的JavaScript程式碼，那麼這個時候我們需要去安裝一個工具，$ npm i eslint-plugin-html -D，因為在vue檔案裡面寫JavaScript程式碼也是寫在script標籤裡面的，這個外掛的作用就是識別一個檔案裡面script標籤裡面的JS程式碼，官方也是這麼推薦的。所以我們要在.eslintrc檔案裡面新增這麼一段：
{
"extends": "standard",
"plugins": [
"html"
]
}
複製程式碼執行完以上步驟後，我們跳轉到package.json檔案裡面的scripts裡面新增一條命令：
"lint": "eslint --ext .js --ext .jsx --ext .vue src/"
複製程式碼--ext後面需要寫上指定檢測檔案的字尾，如.js、.jsx、 .vue等，緊接著後面要寫上一個引數，這個引數就是我們要檢測哪個目錄下面的檔案，一般專案檔案都在src下面，所以在後面寫上src/就好。
現在我們就可以到terminal裡面輸入 $ npm run lint，來檢驗專案裡的程式碼是否符合ESLint的規則。
一般來說，我們專案在前期沒有加入ESLint的時候，後期我們加入了之後跑一下，基本上都會出現非常的多報錯，一執行檢查就是滿屏的error和warning，簡直是喪心病狂不堪入目~
如何讓ESLint自動修復報錯，提高開發效率
在報這麼多的錯誤之後，如果我們一條一條地去修復，就會變的非常的麻煩，相信剛接觸ESLint的童鞋都深有體會。其實這些錯誤都可以讓ESLint幫助我們自動地修復。
那麼我們該怎麼做呢？繼續在package.json檔案裡面的scripts裡面新增一條命令：
"lint-fix": "eslint --fix --ext .js --ext .jsx --ext .vue src/"
複製程式碼只需要在ESLint後面加上一個引數--fix，它就會自動修復Lint出來的問題。當我們再去terminal裡面跑一下：$ npm run lint-fix ，你會發現，世界一下安靜了許多，沒有那麼多飄紅的報錯，沒有滿屏的error和warning。
當然，還有一種萬能方法，就是在報錯的JS檔案中第一行寫上/* eslint-disable */
，詳情可見官網的User guide（使用者指南）。
至此，曾經令人抓狂的ESLint報錯此刻卻溫柔的像只小綿羊。
不過，你以為事情到這兒就結束了？NO，NO，NO，我們希望ESLint能夠做的更多。
怎麼在專案中預處理錯誤，eslint-loader來幫忙
我希望在專案開發的過程當中，每次修改程式碼，它都能夠自動進行ESLint的檢查。因為在我們改程式碼的過程中去做一次檢查，如果有錯誤，我們就能夠很快地去定位到這個問題，由於是我們剛剛改過的，因此立馬把它修復掉就OK了。這就避免了我們每次改了一大堆程式碼之後，要去提交的時候，再去跑一次ESLint，有可能有很多地方要去改，浪費我們的時間，因為你一下子就定位不到這個問題在哪裡了。同時我們每次改程式碼的時候去檢測，也能改善我們寫程式碼的規範性，讓我們慢慢養成規範寫程式碼的習慣。
這個時候我們又要在terminal裡面安裝東西了：
$ npm i eslint-loader babel-eslint -D
複製程式碼執行完上述操作後，我們需要跳轉到.eslintrc檔案裡面配置一下：
{
"extends": "standard",
"plugins": [
"html"
],
"parser": "babel-eslint"
}
複製程式碼為什麼我們要配置parser呢？因為我們的專案是基於webpack的，專案裡的程式碼都是需要經過babel去處理的。babel處理的這種語法可能對ESLint不是特別的支援，然後我們使用loader處理ESLint的時候就會出現一些問題。所以一般來說，我們用webpack和babel來進行開發的專案，都會指定它的parser使用babel-eslint。
執行完以上步驟之後，在build目錄下找到我前幾篇文章裡講到的webpack.config.base.js，然後在module下面的rules裡面新增一個物件：
rules: [
{
test: /\.(vue|js|jsx)$/,
loader: 'eslint-loader',
exclude: /node_modules/,
enforce: 'pre'
},
......
]
複製程式碼此時大家可能心裡納悶了，閏土啊你寫的前面三個我們都能看懂，最後一個 enforce: 'pre'這是什麼鬼？
別急，且聽我慢慢道來。因為.vue檔案已經被vue-loader處理過了，而eslint-loader只是做程式碼檢測，肯定不能讓它去預設處理.vue檔案。所以我們希望vue-loader在處理.vue檔案之前，讓eslint-loader先進行一次程式碼檢測。如果程式碼檢測都通過不了的話，那麼vue-loader就不需要處理了，直接報錯就OK了。所以需要加上 enforce: 'pre'，這叫預處理。
執行完上述步驟之後，我們就可以去terminal裡面盡情地跑一下 $ npm run dev ，等執行成功後，我們可以在專案裡找一個js檔案，故意報個錯儲存一下，比如說多加個空格之類的，然後我們的terminal裡面就會馬上報錯，此刻我猜想terminal的內心活動應該是：“TMD，寫的什麼爛程式碼，天天寫bug氣得我每次臉都漲的通紅”~~~
幸運的是，機器是沒有感情的，我們卻可以嗨皮地立馬定位到錯誤，然後把它改掉就可以了。至此，ESLint無師自通，真正做到了內心無懼。
寫在最後
這就是ESLint，輔助編碼規範的執行，有效控制專案程式碼的質量。更多操作指南可以前往官網瞭解，這裡只提供在公司專案中快速上手ESLint的技巧，以及在實戰專案中碰到的問題的解決方案。
不積跬步無以至千里，不積小流無以成江海。希望每一位童鞋都可以在平凡的崗位上積累經驗，沉澱技術，早日成為公司團隊裡的技術骨幹！Good luck！
預告：更多關於前端工程工作流構建的文章，都會第一時間更新在我的公眾號：閏土大叔，歡迎關注！
