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 相关文章推荐
不用MOUSEMOVE也能滑动啊
May 23 Javascript
初学JavaScript_03(ExtJs Grid的简单使用)
Oct 02 Javascript
IE下写xml文件的两种方式(fso/saveAs)
Aug 05 Javascript
javascript匿名函数实例分析
Nov 18 Javascript
Angularjs注入拦截器实现Loading效果
Dec 28 Javascript
js实现表单及时验证功能 用户信息立即验证
Sep 13 Javascript
基于Three.js插件制作360度全景图
Nov 29 Javascript
Javascript实现倒计时(防页面刷新)实例
Dec 13 Javascript
详解vue.js下引入百度地图jsApi的两种方法
Jul 27 Javascript
如何在JavaScript中优雅的提取循环内数据详解
Mar 04 Javascript
一篇文章弄懂javascript中的执行栈与执行上下文
Aug 09 Javascript
JS数组进阶示例【数组的几种函数用法】
Jan 16 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截取后台登陆密码的代码
2012/05/05 PHP
php中长文章分页显示实现代码
2012/09/29 PHP
简单实用的.net DataTable导出Execl
2013/10/28 PHP
wamp安装后自定义配置的方法
2014/08/23 PHP
Yii分页用法实例详解
2014/12/04 PHP
php7 图形用户界面GUI 开发示例
2020/02/22 PHP
JavaScript的面向对象方法以及差别
2008/03/31 Javascript
ExtJs3.0中Store添加 baseParams 的Bug
2010/03/10 Javascript
仿百度的关键词匹配搜索示例
2013/09/25 Javascript
Jquery获取和修改img的src值的方法
2014/02/17 Javascript
JavaScript中的console.assert()函数介绍
2014/12/29 Javascript
基于Arcgis for javascript实现百度地图ABCD marker的效果
2015/09/12 Javascript
剖析Node.js异步编程中的回调与代码设计模式
2016/02/16 Javascript
ajax异步请求详解
2017/01/06 Javascript
zTree实现节点修改的实时刷新功能
2017/03/20 Javascript
ionic 3.0+ 项目搭建运行环境的教程
2017/08/09 Javascript
详解vue项目打包步骤
2019/03/29 Javascript
vue下的@change事件的实现
2019/10/25 Javascript
Vue实现跑马灯效果
2020/05/25 Javascript
跟老齐学Python之集成开发环境(IDE)
2014/09/12 Python
CentOS中使用virtualenv搭建python3环境
2015/06/08 Python
linux安装Python3.4.2的操作方法
2018/09/28 Python
python实现在图片上画特定大小角度矩形框
2018/10/24 Python
Django框架模板文件使用及模板文件加载顺序分析
2019/05/23 Python
Python中@property的理解和使用示例
2019/06/11 Python
Flask框架实现的前端RSA加密与后端Python解密功能详解
2019/08/13 Python
用Python将Excel数据导入到SQL Server的例子
2019/08/24 Python
印尼太阳百货公司网站:Matahari
2018/02/04 全球购物
database面试题
2013/03/28 面试题
小学国庆节活动方案
2014/02/11 职场文书
好听的队名和口号
2014/06/09 职场文书
公司授权委托书
2014/10/17 职场文书
2016秋季幼儿园开学寄语
2015/12/03 职场文书
Mysql外键约束的创建与删除的使用
2022/03/03 MySQL
详解Golang如何优雅的终止一个服务
2022/03/21 Golang
使用Redis实现分布式锁的方法
2022/06/16 Redis