vue-cli ESlint

ESLint簡介

關於ESLint的介紹網上不少，這裏就簡單說些有用的。 
ESLint的做用是檢查代碼錯誤和統一代碼風格的。因爲每一個人寫代碼的習慣都會有所不一樣，因此統一代碼風格在團隊協做中尤其重要。

vue-cli的eslint相關

vue-cli在init初始化時會詢問是否須要添加ESLint，確認以後在建立的項目中就會出現.eslintignore和.eslintrc.js兩個文件。 
.eslintignore相似Git的.gitignore用來忽略一些文件不使用ESLint檢查。 
.eslintrc.js是ESLint配置文件，用來設置插件、自定義規則、解析器等配置。

.eslintrc.js

// http://eslint.org/docs/user-guide/configuring module.exports = { root: true, parser: 'babel-eslint', parserOptions: { sourceType: 'module' }, env: { browser: true, }, // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style extends: 'standard', // required to lint *.vue files plugins: [ 'html' ], // add your custom rules here 'rules': { // allow paren-less arrow functions 'arrow-parens': 0, // allow async-await 'generator-star-spacing': 0, // allow debugger during development 'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0 } }

解析器(parser)：使用了babel-eslint，這個能夠在package.json中找到，說明咱們已經安裝過該解析器了。 
環境配置(env)：在瀏覽器中使用eslint。 
繼承(extends)：該配置文件繼承了standard規則，具體規則本身看文檔，看不懂有中文版的。 
規則(rules)：對於三個自定義規則，我特意查了官方文檔。

• arrow-parems 容許箭頭函數參數使用括號,具體操做請看文檔
• generator-star-spacing 容許方法之間加星號，如function * generator() {}。文檔在此。特意查了下，發現這是ES6提供的生成器函數，回頭學習下。
• no-debugger’ 容許在開發環境下使用debugger。這個比較簡單，不過仍是貼下文檔便於查看。

注意：在rules中每一個配置項後面第一個值是eslint規則的錯誤等級。 
* 「off」 或 0 - 關閉這條規則 
* 「warn」 或 1 - 違反規則會警告（不會影響項目運行） 
* 「error」 或 2 - 違反規則會報錯（屏幕上一堆錯誤代碼~）

遇到過的問題

因爲一開始我不瞭解ESLint就寫項目，不知道要看Standard的文檔，因此遇到了不少ESLint的錯誤和警告，分享下但願能對朋友們有幫助。

1. Do not use ‘new’ for side effects

該錯誤是因爲我刪除了/* eslint-disable no-new*/這段註釋引起的，/* eslint-disable */這段註釋的做用就是不讓eslint檢查註釋下面的代碼。

new Vue({ el: '#app', router, template: '<App/>', components: { App } })

錯誤緣由：不能夠直接new一個新對象，須要將新對象賦值給一個變量。

var vm = new Vue()

2. Strings must use singlequote

錯誤緣由：字符串必須用單引號

return { msg: "Welcome to Your Vue.js App", //雙引號，報錯！ }

3. Expected space(s) after 「return」

錯誤緣由：括號兩側必需要有空格隔開

return{// 沒有空格報錯 msg: 'Welcome to Your Vue.js App', } startClock (){} //){中間沒有空格，報錯！

4. Expected indentation of 8 spaces but found 6

錯誤緣由：使用兩個空格進行縮進。

if (this.IntervalID === '') { this.IntervalID = setInterval(this.countDown, 1000) }

其實ESLint的報錯並不難懂，只要理解錯誤緣由仍是很好解決的。若是提早看看文檔，更不會出現太多報錯問題了。這個故事告訴咱們看文檔是很重要滴~%>_<%

Tips

發現ESLint的報錯都會在報錯語句前面顯示一個URL，點擊進去能夠看到詳細的錯誤信息哦。這是我剛在寫博客的時候發現的。

http://eslint.org/docs/rules/no-new Do not use 'new' for side effects E:\Github\EfficiencyTools\EfficiencyTool-VueMobile\src\main.js:15:1 new Vue({

這裏的 http://eslint.org/docs/rules/no-new 就是ESLint規則報錯的緣由，仍是很人性化的。

總結

其實vue-cli的ESLint不須要咱們配置太多，基本的都配置好了，若是你願意徹底能夠照着vue-cli提供的規則去寫代碼。當咱們須要修改一些規則的時候添加到rules中替換原有規則就能夠了。一開始用ESLint寫代碼很煩，常常因爲一些格式問題調試報錯，讓回去改格式。不過慢慢的就會發現使用ESLint以後代碼的確可讀性、美觀性上都好了不少。 推薦使用ESLint來規範代碼編輯~