vue-cli的eslint相关用法


Posted in Javascript onSeptember 29, 2017

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

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

这里的 http://eslint.org/docs/rules/no-new 就是ESLint规则报错的原因,还是很人性化的。

总结

其实vue-cli的ESLint不需要我们配置太多,基本的都配置好了,如果你愿意完全可以照着vue-cli提供的规则去写代码。当我们需要修改一些规则的时候添加到rules中替换原有规则就可以了。一开始用ESLint写代码很烦,经常由于一些格式问题调试报错,让回去改格式。不过慢慢的就会发现使用ESLint之后代码的确可读性、美观性上都好了很多。
推荐使用ESLint来规范代码编辑~

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript异步表单提交,图片上传,兼容异步模拟ajax技术
May 10 Javascript
js离开或刷新页面检测(且兼容FF,IE,Chrome)
Mar 05 Javascript
javascript使用正则获取url上的某个参数
Sep 04 Javascript
jQuery插件FusionWidgets实现的AngularGauge图效果示例【附demo源码】
Mar 23 jQuery
[js高手之路]图解javascript的原型(prototype)对象,原型链实例
Aug 28 Javascript
Vue组件之全局组件与局部组件的使用详解
Oct 09 Javascript
详谈构造函数加括号与不加括号的区别
Oct 26 Javascript
Vue.js分页组件实现:diVuePagination的使用详解
Jan 10 Javascript
如何在Angular8.0下使用ngx-translate进行国际化配置
Jul 24 Javascript
vue开发中遇到的问题总结
Apr 07 Javascript
原生js滑动轮播封装
Jul 31 Javascript
JS时间戳与日期格式互相转换的简单方法示例
Jan 30 Javascript
JavaScript数组的5种迭代方法
Sep 29 #Javascript
微信小程序之GET请求的实例详解
Sep 29 #Javascript
js仿微信抢红包功能
Sep 25 #Javascript
给vue项目添加ESLint的详细步骤
Sep 29 #Javascript
微信小程序 POST请求的实例详解
Sep 29 #Javascript
微信小程序之数据缓存的实例详解
Sep 29 #Javascript
微信小程序getPhoneNumber获取用户手机号
Sep 29 #Javascript
You might like
PHP中的reflection反射机制测试例子
2014/08/05 PHP
php封装的连接Mysql类及用法分析
2015/12/10 PHP
Thinkphp5+plupload实现的图片上传功能示例【支持实时预览】
2019/05/08 PHP
js 动态添加标签(新增一行,其实很简单,就是几个函数的应用)
2009/03/26 Javascript
JavaScript 利用StringBuffer类提升+=拼接字符串效率
2009/11/24 Javascript
jquery入门——事件机制之事件中的冒泡现象示例解释
2020/09/12 Javascript
checkbox使用示例
2013/08/23 Javascript
javascript使用prototype完成单继承
2014/12/24 Javascript
jquery实现翻动fadeIn显示的方法
2015/03/05 Javascript
由简入繁实现Jquery树状结构的方法(推荐)
2016/06/10 Javascript
EasyUI在表单提交之前进行验证的实例代码
2016/06/24 Javascript
JavaScript中访问id对象 属性的方式访问属性(实例代码)
2016/10/28 Javascript
javascript内存分配原理实例分析
2017/04/10 Javascript
JS实现针对给定时间的倒计时功能示例
2017/04/11 Javascript
微信小程序实现图片放大预览功能
2020/10/22 Javascript
vue jsx 使用指南及vue.js 使用jsx语法的方法
2017/11/11 Javascript
Angular CLI在Angular项目中如何使用scss详解
2018/04/10 Javascript
vue 组件中添加样式不生效的解决方法
2018/07/06 Javascript
vue数据操作之点击事件实现num加减功能示例
2019/01/19 Javascript
python通过post提交数据的方法
2015/05/06 Python
Python scikit-learn 做线性回归的示例代码
2017/11/01 Python
django项目运行因中文而乱码报错的几种情况解决
2017/11/07 Python
Python字典循环添加一键多值的用法实例
2019/01/20 Python
pyqt5 实现 下拉菜单 + 打开文件的示例代码
2019/06/20 Python
Win下PyInstaller 安装和使用教程
2019/12/25 Python
基于Django OneToOneField和ForeignKey的区别详解
2020/03/30 Python
python输入中文的实例方法
2020/09/14 Python
python实现xml转json文件的示例代码
2020/12/30 Python
CSS3 display知识详解
2015/11/25 HTML / CSS
把富文本的回车转为br标签
2019/08/09 HTML / CSS
同步和异步有何异同,在什么情况下分别使用他们
2013/04/09 面试题
服务质量承诺书
2014/03/27 职场文书
节约用水的口号
2014/06/20 职场文书
2015欢度元旦标语口号
2014/12/09 职场文书
硕士学位申请报告
2015/05/15 职场文书
车辆挂靠协议书
2016/03/23 职场文书