vue 學1(cp) Eslint 配置及規則說明（報錯）
https://blog.csdn.net/violetjack0808/article/details/72620859
https://blog.csdn.net/hsl0530hsl/article/details/78594973
Vue.js學習系列五 —— 從VUE-CLI來聊聊ESLint
原創 2017年05月22日 06:40:41最近在用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()- 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
vue 學1(cp) Eslint 配置及規則說明（報錯）