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高级程序设计 XML、Ajax 学习笔记
Sep 10 Javascript
使用Javascript接收get传递的值的代码
Nov 30 Javascript
JS应用正则表达式转换大小写示例
Sep 18 Javascript
JavaScript 事件对象介绍
Apr 13 Javascript
JavaScript函数的一些注意要点小结及js匿名函数
Nov 10 Javascript
vue加载自定义的js文件方法
Mar 13 Javascript
VueJs组件之父子通讯的方式
May 06 Javascript
使用vuex解决刷新页面state数据消失的问题记录
May 08 Javascript
微信小程序实现一张或多张图片上传(云开发)
Sep 25 Javascript
Vue中Table组件行内右键菜单实现方法(基于 vue + AntDesign)
Nov 21 Javascript
JavaScript中遍历的十种方法总结
Dec 15 Javascript
关于React Native使用axios进行网络请求的方法
Aug 02 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
PHP4实际应用经验篇(3)
2006/10/09 PHP
简单的PHP图片上传程序
2008/03/27 PHP
Thinkphp中Create方法深入探究
2014/06/16 PHP
PHP之uniqid()函数用法
2014/11/03 PHP
ThinkPHP表单令牌错误的相关解决方法分析
2016/05/20 PHP
js jquery做的图片连续滚动代码
2008/01/06 Javascript
javascript之可拖动的iframe效果代码
2008/08/01 Javascript
JavaScript 替换Html标签实现代码
2009/10/14 Javascript
基于jquery的关于动态创建DOM元素的问题
2010/12/24 Javascript
javascipt基础内容--需要注意的细节
2013/04/10 Javascript
jquery和ajax的关系详细介绍
2013/11/29 Javascript
JavaScript制作的可折叠弹出式菜单示例
2014/04/04 Javascript
微信小程序 教程之注册页面
2016/10/17 Javascript
收集前端面试题之url、href、src
2018/03/22 Javascript
浅谈JS对象添加getter与setter的5种方法
2018/06/09 Javascript
vue-cli webpack 引入swiper的操作方法
2018/09/15 Javascript
Vue和React组件之间的传值方式详解
2019/01/31 Javascript
ES6 Proxy实现Vue的变化检测问题
2019/06/11 Javascript
JavaScript监听键盘事件代码实现
2020/06/03 Javascript
关于angular 8.1使用过程中的一些记录
2020/11/25 Javascript
[46:43]DOTA2上海特级锦标赛D组小组赛#1 EG VS COL第三局
2016/02/28 DOTA
[02:43]DOTA2亚洲邀请赛场馆攻略——带你走进东方体育中心
2018/03/19 DOTA
python执行子进程实现进程间通信的方法
2015/06/02 Python
Python查询IP地址归属完整代码
2017/06/21 Python
Python实现按特定格式对文件进行读写的方法示例
2017/11/30 Python
Python装饰器的执行过程实例分析
2018/06/04 Python
利用pandas进行大文件计数处理的方法
2018/07/25 Python
Python基本数据结构与用法详解【列表、元组、集合、字典】
2019/03/23 Python
使用虚拟环境打包python为exe 文件的方法
2019/08/29 Python
python提取xml里面的链接源码详解
2019/10/15 Python
签约仪式主持词
2014/03/19 职场文书
推普标语口号大全
2015/12/26 职场文书
2019年新郎保证书3篇
2019/10/17 职场文书
Python办公自动化PPT批量转换操作
2021/09/15 Python
使用javascript解析二维码的三种方式
2021/11/11 Javascript
sql查询语句之平均分、最高最低分及排序语句
2022/05/30 MySQL