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

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

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規則報錯的原因,還是很人性化的。

編輯器

推薦使用VSCode來編輯代碼。按照著VSCode拓展插件推薦——提高Node和Vue開發效率來安裝和配置插件后,寫vue項目方便了很多。

總結

其實vue-cli的ESLint不需要我們配置太多,基本的都配置好了,如果你愿意完全可以照著vue-cli提供的規則去寫代碼。當我們需要修改一些規則的時候添加到rules中替換原有規則就可以了。一開始用ESLint寫代碼很煩,經常由于一些格式問題調試報錯,讓回去改格式。不過慢慢的就會發現使用ESLint之后代碼的確可讀性、美觀性上都好了很多。
推薦使用ESLint來規范代碼編輯~

Vue.js學習系列

鑒于前端知識碎片化嚴重,我希望能夠系統化的整理出一套關于Vue的學習系列博客。

Vue.js學習系列一 —— vue-router2學習實踐筆記(附DEMO)
Vue.js學習系列二 —— vuex學習實踐筆記(附DEMO)
Vue.js學習系列三 —— axios和網絡傳輸相關知識的學習實踐
Vue.js學習系列四 —— Webpack打包工具的使用
Vue.js學習系列五 —— 從VUE-CLI來聊聊ESLint
Vue.js學習系列六 —— Vue單元測試Karma+Mocha學習筆記
Vue.js學習系列七 —— Vue服務器渲染Nuxt學習
Vue.js學習系列八 —— Vue源碼學習之State學習

Vue.js學習系列項目地址

本文源碼已收入到GitHub中,以供參考,當然能留下一個star更好啦-
https://github.com/violetjack/VueStudyDemos

關于作者

VioletJack,高效學習前端工程師,喜歡研究提高效率的方法,也專注于Vue前端相關知識的學習、整理。
歡迎關注、點贊、評論留言~我將持續產出Vue相關優質內容。

新浪微博: http://weibo.com/u/2640909603
掘金:https://gold.xitu.io/user/571d953d39b0570068145cd1
CSDN: http://blog.csdn.net/violetjack0808
簡書: http://www.lxweimin.com/users/54ae4af3a98d/latest_articles
Github: https://github.com/violetjack

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容