了解ESlint和其相关操作小结


Posted in Javascript onMay 21, 2018

vue-cli脚手架创建的项目默认使用ESlint规则,启动项目的时候因为各种语法报错,不得不先停下了解一下什么是ESlint,及其相关的一下操作。

【使用vue-cli快速搭建项目】:https://3water.com/article/140498.htm

1. 什么是ESlint?

ESLint 是一个ECMAScript/JavaScript 语法规则和代码风格的检查工具,它的目标是保证代码的一致性和避免错误。

【ESlint 中文官方网站】:http://eslint.cn/

2. ESlint规范

你可以通过下面的列表大概了解ESlint的风格,确实与一般的开发习惯不太相同。

"no-bitwise": 0,//禁止使用按位运算符
"no-catch-shadow": 2,//禁止catch子句参数与外部作用域变量同名
"no-class-assign": 2,//禁止给类赋值
"no-cond-assign": 2,//禁止在条件表达式中使用赋值语句
"no-console": 2,//禁止使用console
"no-const-assign": 2,//禁止修改const声明的变量
"no-constant-condition": 2,//禁止在条件中使用常量表达式 if(true) if(1)
"no-continue": 0,//禁止使用continue
"no-control-regex": 2,//禁止在正则表达式中使用控制字符
"no-debugger": 2,//禁止使用debugger
"no-delete-var": 2,//不能对var声明的变量使用delete操作符
"no-div-regex": 1,//不能使用看起来像除法的正则表达式/=foo/
"no-dupe-keys": 2,//在创建对象字面量时不允许键重复 {a:1,a:1}
"no-dupe-args": 2,//函数参数不能重复
"no-duplicate-case": 2,//switch中的case标签不能重复
"no-else-return": 2,//如果if语句里面有return,后面不能跟else语句
"no-empty": 2,//块语句中的内容不能为空
"no-empty-character-class": 2,//正则表达式中的[]内容不能为空
"no-empty-label": 2,//禁止使用空label
"no-eq-null": 2,//禁止对null使用==或!=运算符
"no-eval": 1,//禁止使用eval
"no-ex-assign": 2,//禁止给catch语句中的异常参数赋值
"no-extend-native": 2,//禁止扩展native对象
"no-extra-bind": 2,//禁止不必要的函数绑定
"no-extra-boolean-cast": 2,//禁止不必要的bool转换
"no-extra-parens": 2,//禁止非必要的括号
"no-extra-semi": 2,//禁止多余的冒号
"no-fallthrough": 1,//禁止switch穿透
"no-func-assign": 2,//禁止重复的函数声明
"no-implicit-coercion": 1,//禁止隐式转换
"no-implied-eval": 2,//禁止使用隐式eval
"no-inline-comments": 0,//禁止行内备注
"no-invalid-regexp": 2,//禁止无效的正则表达式
"no-label-var": 2,//label名不能与var声明的变量名相同
"no-labels": 2,//禁止标签声明
"no-lone-blocks": 2,//禁止不必要的嵌套块
"no-lonely-if": 2,//禁止else语句内只有if语句
"no-loop-func": 1,//禁止在循环中使用函数(如果没有引用外部变量不形成闭包就可以)
"no-multi-spaces": 1,//不能用多余的空格
"no-multi-str": 2,//字符串不能用\换行
"no-multiple-empty-lines": [1, {"max": 2}],//空行最多不能超过2行
"no-native-reassign": 2,//不能重写native对象
"no-negated-in-lhs": 2,//in 操作符的左边不能有!
"no-nested-ternary": 0,//禁止使用嵌套的三目运算
"no-new": 1,//禁止在使用new构造一个实例后不赋值
"no-new-func": 1,//禁止使用new Function
"no-new-object": 2,//禁止使用new Object()
"no-new-require": 2,//禁止使用new require
"no-new-wrappers": 2,//禁止使用new创建包装实例,new String new Boolean new Number
"no-obj-calls": 2,//不能调用内置的全局对象,比如Math() JSON()
"no-octal": 2,//禁止使用八进制数字
"no-octal-escape": 2,//禁止使用八进制转义序列
"no-param-reassign": 2,//禁止给参数重新赋值
"no-path-concat": 0,//node中不能使用__dirname或__filename做路径拼接
"no-plusplus": 0,//禁止使用++,--
"no-process-env": 0,//禁止使用process.env
"no-process-exit": 0,//禁止使用process.exit()
"no-proto": 2,//禁止使用__proto__属性
"no-redeclare": 2,//禁止重复声明变量
"no-regex-spaces": 2,//禁止在正则表达式字面量中使用多个空格 /foo bar/
"no-restricted-modules": 0,//如果禁用了指定模块,使用就会报错
"no-return-assign": 1,//return 语句中不能有赋值表达式
"no-script-url": 0,//禁止使用javascript:void(0)
"no-self-compare": 2,//不能比较自身
"no-sequences": 0,//禁止使用逗号运算符
"no-shadow": 2,//外部作用域中的变量不能与它所包含的作用域中的变量或参数同名
"no-shadow-restricted-names": 2,//严格模式中规定的限制标识符不能作为声明时的变量名使用
"no-spaced-func": 2,//函数调用时 函数名与()之间不能有空格
"no-sync": 0,//nodejs 禁止同步方法
"no-ternary": 0,//禁止使用三目运算符
"no-trailing-spaces": 1,//一行结束后面不要有空格

更全面的了解ESlint规则建议点这里 :

【ESlint 官方规则列表】:http://eslint.cn/docs/rules/

3.如何根据ESlint规则修改代码?

每次改动后启动项目,ESlint都会检测你的代码,然后在浏览器的控制台疯狂报错。一开始我是根据控制台的报错信息,一条一条回去修改的,但是这样的方式太低效。后来同事告诉我一种高效的方式,可以直接让开发工具(webstorm or idea)识别ESlint,并且格式代码,过程是这样的:

Setting ->Preferences -> Languages & Frameworks -> JavaScript -> Code Quality Tools -> Eslint ,然后勾选Enable单选框。

了解ESlint和其相关操作小结

配置ESlint

勾选后你就会发现,idea和webstorm会通过红色的下划线来告诉你,什么地方不符合ESlint规则。这使我们能在开发过程中,就根据ESlint规则修改代码,而不是等到运行项目后,通过控制台才发现语法错误。

了解ESlint和其相关操作小结

ESlint规则提示

除了此之外,idea和webstorm还能一键格式化,让代码按照ESlint规则自动调整。在有语法错误的文件右击,然后点击Fix ESint就好了:

了解ESlint和其相关操作小结

一键格式化

4.如何关闭ESlint语法检测?

这个很简单,build --> webpack.base.conf.js,然后注释掉图片所指那段代码,就可以了。

了解ESlint和其相关操作小结

关闭ESlint语法检测

// test: /\.(js|vue)$/,
 // loader: 'eslint-loader',
 // enforce: 'pre',
 // include: [resolve('src'), resolve('test')],
 // options: {
 //  formatter: require('eslint-friendly-formatter'),
 //  emitWarning: !config.dev.showEslintErrorsInOverlay
 // }

去了解如何关闭ESlint检测,是因为一直在报错,挺烦的。

但是比较深入的了解完ESlint后,个人感觉还是挺有必要使用的,对于共同开发,维护代码有这很好的作用。

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

Javascript 相关文章推荐
js控制div及网页相关属性的代码
Dec 19 Javascript
分享一个asp.net pager分页控件
Jan 04 Javascript
FF IE浏览器修改标签透明度的方法
Jan 27 Javascript
Jquery EasyUI中弹出确认对话框以及加载效果示例代码
Feb 13 Javascript
JS实现文字向下滚动完整实例
Feb 06 Javascript
jQuery实现带有上下控制按钮的简单多行滚屏效果代码
Sep 04 Javascript
Node.js开发教程之基于OnceIO框架实现文件上传和验证功能
Nov 30 Javascript
详谈jQuery中的一些正则匹配表达式
Mar 08 Javascript
jQuery实现经典的网页3D轮播图封装功能【附源码下载】
Feb 15 jQuery
jQuery中DOM常见操作实例小结
Aug 01 jQuery
vue使用i18n实现国际化的方法详解
Sep 05 Javascript
JavaScript流程控制(循环)
Dec 06 Javascript
vue2.0 实现导航守卫(路由守卫)
May 21 #Javascript
使用vue-cli(vue脚手架)快速搭建项目的方法
May 21 #Javascript
JavaScript实现一个带AI的井字棋游戏源码
May 21 #Javascript
Vue中父子组件通讯之todolist组件功能开发
May 21 #Javascript
Vue+Jwt+SpringBoot+Ldap完成登录认证的示例代码
May 21 #Javascript
纯JS实现可用于页码更换的飞页特效示例
May 21 #Javascript
JS实现的文件拖拽上传功能示例
May 21 #Javascript
You might like
计算2000年01月01日起到指定日的天数
2006/10/09 PHP
SMARTY学习手记
2007/01/04 PHP
php flush类输出缓冲剖析
2008/10/19 PHP
php设计模式 Mediator (中介者模式)
2011/06/26 PHP
php读取txt文件组成SQL并插入数据库的代码(原创自Zjmainstay)
2012/07/31 PHP
解析php根据ip查询所在地区(非常有用,赶集网就用到)
2013/07/01 PHP
php中利用explode函数分割字符串到数组
2014/02/08 PHP
PHP文件读写操作相关函数总结
2014/11/18 PHP
Zend Framework教程之Zend_Layout布局助手详解
2016/03/04 PHP
PHP有序表查找之二分查找(折半查找)算法示例
2018/02/09 PHP
PHP简单实现解析xml为数组的方法
2018/05/02 PHP
JS小功能(offsetLeft实现图片滚动效果)实例代码
2013/11/28 Javascript
jQueryUI Datepicker组件设置日期高亮
2016/10/13 Javascript
jQuery获取table下某一行某一列的值实现代码
2017/04/07 jQuery
微信小程序wx.previewImage预览图片实例详解
2017/12/07 Javascript
AngularJS实时获取并显示密码的方法
2018/02/06 Javascript
vue 组件中slot插口的具体用法
2018/04/03 Javascript
angularjs实现的购物金额计算工具示例
2018/05/08 Javascript
AngularJS上传文件的示例代码
2018/11/10 Javascript
vue+echarts实现可拖动节点的折线图(支持拖动方向和上下限的设置)
2019/04/12 Javascript
nodejs二进制与Buffer的介绍与使用
2019/07/11 NodeJs
[00:18]天涯墨客三技能展示
2018/08/25 DOTA
Python urllib模块urlopen()与urlretrieve()详解
2013/11/01 Python
python基础教程之python消息摘要算法使用示例
2014/02/10 Python
Python map和reduce函数用法示例
2015/02/26 Python
分享一个可以生成各种进制格式IP的小工具实例代码
2017/07/28 Python
Python爬虫分析微博热搜关键词的实现代码
2021/02/22 Python
基于Html5实现的语音搜索功能
2019/05/13 HTML / CSS
iframe跨域的几种常用方法
2019/11/11 HTML / CSS
英国最受信任的在线眼镜商之一:Fashion Eyewear
2019/10/31 全球购物
《鱼游到了纸上》教学反思
2014/02/20 职场文书
购房公证委托书(2014版)
2014/09/12 职场文书
个人投资合作协议书
2014/10/12 职场文书
新教师个人总结
2015/02/06 职场文书
小学四年级作文之写景
2019/08/23 职场文书
SQL优化老出错,那是你没弄明白MySQL解释计划用法
2021/11/27 MySQL