eslint如何在vue-cli中使用

本篇文章為大家展示了eslint如何在vue-cli中使用，內容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。

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({

上述內容就是eslint如何在vue-cli中使用，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注億速云行業資訊頻道。