在項目中如何使用ESLint提升代碼質量

關於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如何去使用呢？首先咱們要去安裝它：
「$ npm install eslint」
至因而本地安裝仍是全局安裝，大家能夠看項目需求。在這裏，咱們就不用官方提供的 eslint --init 來生成咱們的配置文件了，後面咱們會手動配置。尚學堂•百戰程序員陳老師指出規則也不用咱們本身去指定，想看更多規則能夠前往官網瞭解，這裏只提供在公司項目中快速上手ESLint的技巧，以及在實戰項目中碰到的問題的解決方案。
執行完以上步驟，咱們就可使用ESLint這個工具來校驗項目裏的代碼。
在Vue項目裏，.vue文件寫的是相似於html的格式，不是標準的JavaScript文件，ESLint沒法直接識別.vue文件裏的JavaScript代碼，那麼這個時候咱們須要去安裝一個工具，$ npm i eslint-plugin-html -D，由於在vue文件裏面寫JavaScript代碼也是寫在script標籤裏面的，這個插件的做用就是識別一個文件裏面script標籤裏面的JS代碼，官方也是這麼推薦的。
如今咱們就能夠到terminal裏面輸入 $ npm run lint，來檢驗項目裏的代碼是否符合ESLint的規則。
通常來講，咱們項目在前期沒有加入ESLint的時候，後期咱們加入了以後跑一下，基本上都會出現很是的多報錯，一執行檢查就是滿屏的error和warning，怎麼在項目中預處理錯誤，eslint-loader來幫忙。
我但願在項目開發的過程中，每次修改代碼，它都可以自動進行ESLint的檢查。由於在咱們改代碼的過程當中去作一次檢查，若是有錯誤，咱們就可以很快地去定位到這個問題，因爲是咱們剛剛改過的，所以立馬把它修復掉就OK了。這就避免了咱們每次改了一大堆代碼以後，要去提交的時候，再去跑一次ESLint，有可能有不少地方要去改，浪費咱們的時間，由於你一會兒就定位不到這個問題在哪裏了。同時咱們每次改代碼的時候去檢測，也能改善咱們寫代碼的規範性，讓咱們慢慢養成規範寫代碼的習慣。