了解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 相关文章推荐
javascript 浏览器检测代码精简版
Mar 04 Javascript
Javascript表格翻页效果实现思路及代码
Aug 23 Javascript
实例分析js和C#中使用正则表达式匹配a标签
Nov 26 Javascript
深入理解JavaScript系列(31):设计模式之代理模式详解
Mar 03 Javascript
jquery实现实时改变网页字体大小、字体背景色和颜色的方法
Aug 05 Javascript
js实现文本框输入文字个数限制代码
Dec 25 Javascript
jquery输入数字随机抽奖特效的简单实现代码
Jun 10 Javascript
easyui combotree加载静态数据问题(选不上)解决方法
Dec 26 Javascript
JavaScript 中调用 Kotlin 方法实例详解
Jun 09 Javascript
SpringMVC简单整合Angular2的示例
Jul 31 Javascript
JS设计模式之惰性模式(二)
Sep 29 Javascript
关于redux-saga中take使用方法详解
Feb 27 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
怎样给PHP源代码加密?PHP二进制加密与解密的解决办法
2013/04/22 PHP
PHP 冒泡排序 二分查找 顺序查找 二维数组排序算法函数的详解
2013/06/25 PHP
php ZipArchive压缩函数详解实例
2013/11/06 PHP
Array.slice()与Array.splice()的返回值类型
2006/10/09 Javascript
JavaScript全局函数使用简单说明
2011/03/11 Javascript
如何使用jQUery获取选中radio对应的值(一句代码)
2013/06/03 Javascript
JS打字效果的动态菜单代码分享
2015/08/21 Javascript
AngularJS基础 ng-open 指令简单实例
2016/08/02 Javascript
用AngularJS的指令实现tabs切换效果
2016/08/31 Javascript
JS图片左右无缝隙滚动的实现(兼容IE,Firefox 遵循W3C标准)
2016/09/23 Javascript
Angular获取手机验证码实现移动端登录注册功能
2017/05/17 Javascript
AngularJS+Bootstrap3多级导航菜单的实现代码
2017/08/16 Javascript
JS中call和apply函数用法实例分析
2018/06/20 Javascript
nodejs遍历文件夹下并操作HTML/CSS/JS/PNG/JPG的方法
2018/11/01 NodeJs
layUI实现列表查询功能
2019/07/27 Javascript
微信小程序页面调用自定义组件内的事件详解
2019/09/12 Javascript
JS this关键字在ajax中使用出现问题解决方案
2020/07/17 Javascript
[01:53]DOTA2超级联赛专访Zhou 五年职业青春成长
2013/05/29 DOTA
Python求解平方根的方法
2015/03/11 Python
Python单元测试框架unittest使用方法讲解
2015/04/13 Python
python监控进程脚本
2018/04/12 Python
python3转换code128条形码的方法
2019/04/17 Python
不到40行代码用Python实现一个简单的推荐系统
2019/05/10 Python
python安装gdal的两种方法
2019/10/29 Python
Python网络爬虫四大选择器用法原理总结
2020/06/01 Python
聊聊Python pandas 中loc函数的使用,及跟iloc的区别说明
2021/03/03 Python
pip/anaconda修改镜像源,加快python模块安装速度的操作
2021/03/04 Python
Quiksilver荷兰官方网站:冲浪和滑雪板
2019/11/16 全球购物
给校长的建议书100字
2014/05/16 职场文书
军训拉歌口号
2014/06/13 职场文书
伊琍体标语
2014/06/25 职场文书
高中美术教师事迹材料
2014/08/22 职场文书
2014国庆节餐厅促销活动策划方案
2014/09/16 职场文书
12.4法制宣传日标语
2014/10/08 职场文书
查摆问题整改措施范文
2014/10/11 职场文书
红歌会主持词
2015/07/02 职场文书