vue 学1(cp) Eslint 配置及规则说明(报错)

Posted ThisCall

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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 配置及规则说明(报错)的主要内容,如果未能解决你的问题,请参考以下文章

配置 eslint 规则

配置 eslint 规则

配置 eslint 规则

如何使用 ESLint + Prettier + Airbnb 规则 + TypeScript + Vetur 配置 Vue CLI 4?

eslintrc.js配置文件详解及参考文档

vs工程配置eslint检测环境