https://blog.csdn.net/violetjack0808/article/details/72620859
https://blog.csdn.net/hsl0530hsl/article/details/78594973
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)：对于三个自定义规则，我特地查了官方文档。
注意：在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:GithubEfficiencyToolsEfficiencyTool-VueMobilesrcmain.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