了解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取消文本选定的实现代码
Nov 14 Javascript
常见JS效果之图片减速度滚动实现代码
Dec 08 Javascript
jQuery实现单击按钮遮罩弹出对话框(仿天猫的删除对话框)
Apr 10 Javascript
JQuery datepicker 用法详解
Dec 25 Javascript
在线引用最新jquery文件的实现方法
Aug 26 Javascript
微信页面倒计时代码(解决safari不兼容date的问题)
Dec 13 Javascript
jQuery EasyUI 为Combo,Combobox添加清除值功能的实例
Apr 13 jQuery
Vue form 表单提交+ajax异步请求+分页效果
Apr 22 Javascript
Angular2 父子组件通信方式的示例
Jan 29 Javascript
AjaxUpLoad.js实现文件上传功能
Mar 02 Javascript
深度解读vue-resize的具体用法
Jul 08 Javascript
Vue实现跑马灯样式文字横向滚动
Nov 23 Vue.js
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获取网页标题和内容函数(不包含html标签)
2014/02/03 PHP
Yii不依赖Model的表单生成器用法实例
2014/12/04 PHP
php正则匹配html中带class的div并选取其中内容的方法
2015/01/13 PHP
php有效防止同一用户多次登录
2015/11/19 PHP
PHP PDOStatement::bindValue讲解
2019/01/30 PHP
JavaScript自定义DateDiff函数(兼容所有浏览器)
2012/03/01 Javascript
javascript的解析执行顺序在各个浏览器中的不同
2014/03/17 Javascript
用jquery.sortElements实现table排序
2014/05/04 Javascript
深入分析escape()、encodeURI()、encodeURIComponent()的区别及示例
2014/08/04 Javascript
JS+CSS实现带关闭按钮DIV弹出窗口的方法
2015/02/27 Javascript
JQuery validate插件验证用户注册信息
2016/05/11 Javascript
AngularJS过滤器filter用法总结
2016/12/13 Javascript
Bootstrap图片轮播效果详解
2017/10/17 Javascript
laydate日历控件使用方法详解
2017/11/20 Javascript
JS简单生成由字母数字组合随机字符串示例
2018/05/25 Javascript
微信小程序实现笑脸评分功能
2018/11/03 Javascript
基于jquery实现九宫格拼图小游戏
2018/11/30 jQuery
JQuery事件冒泡和默认行为代码实例
2020/05/13 jQuery
JS如何定义用字符串拼接的变量
2020/07/11 Javascript
vue实现给div绑定keyup的enter事件
2020/07/31 Javascript
Vue 构造选项 - 进阶使用说明
2020/08/14 Javascript
Python运算符重载用法实例
2015/05/28 Python
Python实现利用最大公约数求三个正整数的最小公倍数示例
2017/09/30 Python
python 实现在Excel末尾增加新行
2018/05/02 Python
Python实现决策树C4.5算法的示例
2018/05/30 Python
Python实现多态、协议和鸭子类型的代码详解
2019/05/05 Python
python web框架中实现原生分页
2019/09/08 Python
PyQt5-QDateEdit的简单使用操作
2020/07/12 Python
python使用正则表达式匹配txt特定字符串(有换行)
2020/12/09 Python
.NET是怎么支持多种语言的
2015/02/24 面试题
同学聚会欢迎辞
2014/01/14 职场文书
安全责任协议书
2014/04/21 职场文书
小兵张嘎观后感300字
2015/06/03 职场文书
党员转正大会主持词
2015/07/02 职场文书
先进工作者主要事迹材料
2015/11/03 职场文书
SQL SERVER触发器详解
2022/02/24 SQL Server