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 相关文章推荐
鼠标右击事件代码(asp.net后台)
Jan 27 Javascript
兼容IE和Firefox的javascript获取iframe文档内容的函数
Aug 15 Javascript
JS实现简单的顶部定时关闭层效果
Jun 15 Javascript
js实现select跳转功能代码
Oct 22 Javascript
js实现动画特效的文字链接鼠标悬停提示的方法
Mar 02 Javascript
jQuery获取attr()与prop()属性值的方法及区别介绍
Jul 06 Javascript
JS获取input file绝对路径的方法(推荐)
Aug 02 Javascript
使用JS轻松实现ionic调用键盘搜索功能(超实用)
Sep 06 Javascript
利用node.js搭建简单web服务器的方法教程
Feb 20 Javascript
JavaScript数据结构之数组的表示方法示例
Apr 12 Javascript
Vue 配合eiement动态路由,权限验证的方法
Sep 26 Javascript
vuex + keep-alive实现tab标签页面缓存功能
Oct 17 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程序之die调试法 快速解决错误
2009/09/17 PHP
浏览器关闭后,能继续执行的php函数(ignore_user_abort)
2012/08/01 PHP
C#使用PHP服务端的Web Service通信实例
2014/04/08 PHP
PHP mkdir创建文件夹实现方法解析
2020/11/13 PHP
js调试工具 Javascript Debug Toolkit 2.0.0版本发布
2008/12/02 Javascript
ext 列表页面关于多行查询的办法
2010/03/25 Javascript
jQuery代码优化 选择符篇
2011/11/01 Javascript
JavaScript 基础篇之对象、数组使用介绍(三)
2012/04/07 Javascript
这些年、我收集的JQuery代码小结
2012/08/01 Javascript
js插件YprogressBar实现漂亮的进度条效果
2015/04/20 Javascript
javascript如何定义对象数组
2016/06/07 Javascript
JS传参及动态修改页面布局
2017/04/13 Javascript
node中Express 动态设置端口的方法
2017/08/04 Javascript
Chrome调试折腾记之JS断点调试技巧
2017/09/11 Javascript
Sublime Text新建.vue模板并高亮(图文教程)
2017/10/26 Javascript
bootstrap3中container与container_fluid外层容器的区别讲解
2017/12/04 Javascript
vue+springboot前后端分离实现单点登录跨域问题解决方法
2018/01/30 Javascript
js实现简单选项卡功能
2020/03/23 Javascript
Vue入门之数量加减运算操作示例
2018/12/11 Javascript
Node.js + express实现上传大文件的方法分析【图片、文本文件】
2019/03/14 Javascript
浅谈KOA2 Restful方式路由初探
2019/03/14 Javascript
微信小程序基于canvas渐变实现的彩虹效果示例
2019/05/03 Javascript
Ajax请求时无法重定向的问题解决代码详解
2019/06/21 Javascript
Angular8 Http拦截器简单使用教程
2019/08/20 Javascript
详解vue组件之间的通信
2020/08/30 Javascript
python中ConfigParse模块的用法
2014/09/29 Python
Python 模块EasyGui详细介绍
2017/02/19 Python
python 使用多线程创建一个Buffer缓存器的实现思路
2020/07/02 Python
Python中使用aiohttp模拟服务器出现错误问题及解决方法
2020/10/31 Python
CSS3实现多样的边框效果
2018/05/04 HTML / CSS
行政助理岗位职责
2013/11/10 职场文书
学校岗位设置方案
2014/01/16 职场文书
租车协议书
2015/01/27 职场文书
幼师自荐信范文(2016推荐篇)
2016/01/28 职场文书
高中诗歌鉴赏教学反思
2016/02/16 职场文书
关于办理居住证的介绍信模板
2019/11/27 职场文书