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

• 7092

最近在用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