我是如何在公司項目中使用ESLint來提高代碼質量的

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！

---

預告：更多關於前端工程工做流構建的文章，都會第一時間更新在個人公衆號：閏土大叔，歡迎關注！