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 相关文章推荐
使用jquery插件实现图片延迟加载技术详细说明
Mar 12 Javascript
JavaScript 原型继承之构造函数继承
Aug 26 Javascript
jQuery中需要注意的细节问题小结
Dec 06 Javascript
jQuery ajax(复习)—Baidu ajax request分离版
Jan 24 Javascript
含有CKEditor的表单如何提交
Jan 09 Javascript
JavaScript判断浏览器类型的方法
Feb 10 Javascript
JavaScript基本语法讲解
Jun 03 Javascript
JS实现京东首页之页面顶部、Logo和搜索框功能
Jan 12 Javascript
node.js连接MongoDB数据库的2种方法教程
May 17 Javascript
React 项目迁移 Webpack Babel7的实现
Sep 12 Javascript
教你如何用Node实现API的转发(某音乐)
Sep 20 Javascript
antd 表格列宽自适应方法以及错误处理操作
Oct 27 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+MSSQL分页的例子
2006/10/09 PHP
深入解析Session是否必须依赖Cookie
2013/08/02 PHP
php制作的简单验证码识别代码
2016/01/26 PHP
禁用JavaScript控制台调试的方法
2014/03/07 Javascript
js实现图片旋转的三种方法
2014/04/10 Javascript
使用console进行性能测试
2015/04/27 Javascript
JavaScript实现表格点击排序的方法
2015/05/11 Javascript
js获取鼠标位置实例详解
2015/12/09 Javascript
js关于getImageData跨域问题的解决方法
2016/10/14 Javascript
基于KO+BootStrap+MVC实现的分页控件代码分享
2016/11/07 Javascript
JavaScript实现汉字转换为拼音的库文件示例
2016/12/22 Javascript
Vim快速合并行及vim 将文件所有行合并到一行
2017/11/27 Javascript
9种改善AngularJS性能的方法
2017/11/28 Javascript
tween.js缓动补间动画算法示例
2018/02/13 Javascript
pm2发布node配置文件ecosystem.json详解
2019/05/15 Javascript
通过seajs实现JavaScript的模块开发及按模块加载
2019/06/06 Javascript
七行JSON代码把你的网站变成移动应用过程详解
2019/07/09 Javascript
vue(2.x,3.0)配置跨域代理
2019/11/27 Javascript
[03:49]DOTA2英雄基础教程 光之守卫
2014/01/14 DOTA
[00:44]华丽开场!DOTA2勇士令状带来全新对阵画面
2019/05/15 DOTA
python线程池的实现实例
2013/11/18 Python
Python列表list数组array用法实例解析
2014/10/28 Python
Python实现微信公众平台自定义菜单实例
2015/03/20 Python
CentOS6.9 Python环境配置(python2.7、pip、virtualenv)
2019/05/06 Python
Python数据可视化实现正态分布(高斯分布)
2019/08/21 Python
Django实现CAS+OAuth2的方法示例
2019/10/30 Python
Python面向对象之继承原理与用法案例分析
2019/12/31 Python
解决pyinstaller 打包exe文件太大,用pipenv 缩小exe的问题
2020/07/13 Python
如何使用Python自动生成报表并以邮件发送
2020/10/15 Python
一款纯css3实现的响应式导航
2014/10/31 HTML / CSS
Happy Plugs官网:瑞典无线耳机品牌
2020/07/16 全球购物
北京华建集团SQL面试题
2014/06/03 面试题
新锐科技Java程序员面试题
2016/07/25 面试题
大学生学习2014全国两会心得体会
2014/03/13 职场文书
个人课题方案
2014/05/08 职场文书
物业管理交接协议书
2016/03/24 职场文书