了解ESlint和其相关操作小结

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

【使用vue-cli快速搭建项目】：https://www.freexyz.cn/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

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

ESlint规则提示

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

一键格式化

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

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

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。