温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

ESlint和其相关操作的示例分析

发布时间:2021-07-24 09:27:14 阅读:168 作者:小新 栏目:web开发
开发者测试专用服务器限时活动,0元免费领,库存有限,领完即止! 点击查看>>

这篇文章将为大家详细讲解有关ESlint和其相关操作的示例分析,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

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

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后,个人感觉还是挺有必要使用的,对于共同开发,维护代码有这很好的作用。

关于“ESlint和其相关操作的示例分析”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。

亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI

开发者交流群×