Eslint 配置及規則說明(報錯)

https://blog.csdn.net/violetjack0808/article/details/72620859

https://blog.csdn.net/hsl0530hsl/article/details/78594973javascript

Vue.js學習系列五 —— 從VUE-CLI來聊聊ESLint

原創 2017年05月22日 06:40:41
  • 7092

最近在用vue-cli寫項目的時候,常常和ESLint打交道,也算是不打不相識啦。下面總結一下在學習Vue的時候遇到的一些問題。css

ESLint簡介

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

vue-cli的eslint相關

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

.eslintrc.jsjava

// 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):對於三個自定義規則,我特意查了官方文檔。ios

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

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

遇到過的問題

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

1. Do not use ‘new’ for side effects

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

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

 

錯誤緣由:不能夠直接new一個新對象,須要將新對象賦值給一個變量。vue-router

var vm = new Vue()
  • 1

2. Strings must use singlequote

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

return { msg: "Welcome to Your Vue.js App", //雙引號,報錯! }
  • 1
  • 2
  • 3

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來規範代碼編輯~

Vue.js學習系列

做者最近正在學習Vue的各類知識,但願可以系統的掌握Vue的開發知識。有興趣的同窗能夠查看以前發佈的文章: 
Vue.js學習系列一 —— vue-router2學習實踐筆記(附DEMO) 
Vue.js學習系列二 —— vuex學習實踐筆記(附DEMO) 
Vue.js學習系列三——axios和網絡傳輸相關知識的學習實踐 
Vue.js學習系列四——Webpack打包工具的使用 
Vue.js學習系列五 —— 從VUE-CLI來聊聊ESLint

相關文章
相關標籤/搜索