ESLint学习
介绍ESLint
- ESLint最初是由Nicholas C. Zakas 于2013年6月创建的开源项目。它的目标是提供一个插件化的javascript代码检测工具。
- ESLint 使用 Node.js 编写，这样既可以有一个快速的运行环境的同时也便于安装。
- ESLint是一个QA工具，用来避免低级错误和统一代码的风格
安装
//全局安装
npm install -g eslint
配置
ESLint被设计为完全可配置的，主要有两种方式来配置ESLint：
- 内嵌配置：将配置信息以注释的形式写在要检验的文件内
- 文件配置：利用javascript、json、yml语言的语法，生成名为.eslintrc.*的配置文件，将配置信息写到文件内
JavaScript standard规范细则
- 使用两个空格进行缩进
eslint：indent - 除需要转义的情况外，字符串统一使用单引号
eslint：quotes - 不要定义未使用的变量 eslint：
no-unused-vars - 关键字后面加空格 eslint：
keyword-spacing - 函数声明时括号与函数名间加空格 eslint:
space-before-function-paren - 始终使用===替代== eslint:
eqeqeq
（例外：obj == null可以用来检查null || undefined） - 字符串拼接操作符（Infix operators）之间要留空格 eslint：
space-infix-ops - 逗号后面加空格 eslint：
comma-spacing - else关键字要与花括号保持在同一行 eslint：
brace-style - 多行if语句的括号不能省 eslint：
curly - 不要丢掉异常出入中err参数 eslint：
handle-callback-err - 使用浏览器全局变量时加上window.前缀 eslint：
no-undef
例外：document,console和navigator - 不允许有连续多行空行 eslint：
no-multiple-empty-lines - 对于三元运算符
?和:与他们所负责的代码处于同一行 eslint：operator-linebreak - 每个var关键字单独声明一个变量 eslint：
one-var - 条件语句中赋值语句使用括号包起来。这样使得代码更加清晰刻度，而不会认为是将条件判断语句的全等号（===）错写成了等号（=） eslint：
no-cond-assign - 单行代码块两边加空格 eslint：
block-spacing - 对于变量和函数名统一使用驼峰命名法 eslint：
camelcase - 不允许有多余的行末逗号 eslint：
comma-dangle - 始终将逗号置于行末 eslint：
comma-style - 点好操作符须与属性在同一行 eslint：
dot-location - 文件末尾留一空行 eslint：
eol-last - 函数调用时标识符与括号间不留间隔 eslint：
func-call-spacing - 键值对当中与值之间要留空白 eslint：
key-spacing - 构造函数要以大写字母开头 eslint：
new-cap - 无参的构造函数调用时要带上括号 eslint：
new-parens - 对象中定义了存值器，一定要对应的定义取值器 eslint：
accessor-pairs - 子类的构造器中一定要调用super eslint：
constructor-super - 使用数组字面量而不是构造器 eslint：
no-array-constructor - 避免使用
arguments.callee和arguments.callereslint：no-caller - 避免对类名重新赋值 eslint：
no-class-assign - 避免修改使用
const声明的变量 eslint：no-const-assign - 避免使用常量作为条件表达式的条件（循环语句除外） eslint：
no-contant-condition - 正则中不要使用控制符 eslint：
no-control-regex - 不要使用
debuggereslint：no-debugger - 不要对变量使用
delete操作 eslint：no-delete-var - 不要定义冗余的函数参数 eslint：
no-dupe-args - 类中不要定义冗余的属性 eslint：
no-dupe-class-members - 对象字面量中不要定义重复的属性 eslint：
no-dupe-keys switch语句中不要定义重复的case分支 eslint：no-duplicate-case- 同一模块有多个导入时一次性写完 eslint：
no-duplicate-imports - 正则中不要使用空字符 eslint：
no-empty-character-class - 不要解构空值 eslint：
no-empty-pattern - 不要使用
eval()eslint：no-eval catch中不要对错误重新赋值 eslint：no-ex-assign- 不要扩展原生对象 eslint：
no-extend-native - 避免多余的函数上下文绑定 eslint：
no-extra-bind - 避免不必要的布尔转换 eslint：
no-extra-boolean-cast - 不要使用多余的括号包裹函数 eslint：
no-extra-parens switch一定要使用break来将条件分支正常中断 eslint：no-fallthrough- 不要省去小数点前面的0 eslint：
no-floating-decimal - 避免对声明过的函数重新赋值 eslint：
no-func-assign - 不要对全局只读对象重新赋值 eslint：
no-global-assign - 注意隐式的
eval()eslint：no-implied-eval - 嵌套的代码块中禁止再定义函数 eslint：
no-inner-declarations - 不要向
RegExp构造器传入非法的正则表达式 eslint：no-invalid-regexp - 不要使用非法的空白符 eslint：
no-irregular-whitespace - 禁止使用
__iterator__eslint：no-iterator - 外部变量不要与对象属性重名 eslint：
no-label-var - 不要使用标签语句 eslint：
no-labels - 不要书写不必要的嵌套代码块 eslint：
no-lone-blocks - 不要混合使用空格与制表符作为缩进 eslint：
no-mixed-spaces-and-tabs - 除了缩进，不要使用多个空格 eslint：
no-multi-spaces - 不要使用多行字符串 eslint：
no-multi-str new创建对象实例后需要赋值给变量 eslint：no-new- 禁止使用
Funtion构造器 eslint：no-new-func - 禁止使用
Object构造器 eslint：no-new-object - 禁止使用
new requireeslint：no-new-require - 禁止使用
Symbol构造器 eslint：no-new-symbol - 禁止使用原始包装器 eslint：
no-new-wrappers - 不要将全局对象的属性作为函数调用 eslint：
no-obj-calls - 不要使用八进制字面量 eslint：
no-octal - 字符串字面量中也不要使用八进制转义字符 eslint：
no-octal-escape - 使用
__dirname和__filename时尽量避免使用字符串拼接 eslint：no-path-concat - 使用
getPrototypeOf来替代__proto__eslint：no-proto - 不要重复声明变量 eslint：
no-redeclare - 正则中避免使用多个空格 eslint：
no-regex-spaces - return语句中的赋值必须有括号包裹 eslint：
no-return-assign - 避免将变量赋给自己 eslint：
no-self-assign - 避免将变量与自己进行比较操作 eslint：
no-self-compare - 避免使用逗号操作符 eslint：
no-sequences - 不要随意更改关键字的值 eslint：
no-shadow-restricted-names - 禁止使用稀疏数组（Sparse arrays） eslint：
no-sparse-arrays - 不要使用制表符 eslint：
no-tabs - 正确使用ES6中的字符串模板 eslint：
no-template-curly-in-string - 使用
this前请确保super()已调用 eslint：no-this-before-super - 用
throw抛错时，抛出Error对象而不是字符串 eslint：no-throw-literal - 行末不留空格 eslint：
no-trailing-spaces - 不要使用
undefined来初始化变量 eslint：no-undef-init - 循环语句中注意更新循环变量 eslint：
no-unmodified-loop-condition - 如果有更好的实现，尽量不要使用三元表达式 eslint：
no-unneeded-ternary return，throw，continue和break后不要再跟代码 eslint：no-unreachablefinally代码块中不要再改变程序执行流程 eslint：no-unsafe-finally- 关系运算符的左值不要做取反操作 eslint：
no-unsafe-negation - 避免不必要的
.call()和.apply()eslint：no-useless-call - 避免使用不必要的计算值作对象属性 eslint：
no-useless-computed-key - 禁止多余的构造器 eslint：
no-useless-constructor - 禁止不必要的转义 eslint：
no-useless-escape - import,export和解构操作中，禁止赋值到同名变量 eslint：
no-useless-rename - 属性前面不要加空格 eslint：
no-whitespace-before-property - 禁止使用
witheslint：no-with - 对象属性换行时注意统一代码风格 eslint：
object-property-newline - 代码块中避免多余留白 eslint：
padded-blocks - 展开运算符与它的表达式间不要留空白 eslint：
rest-spread-spacing - 遇到分号时空格要后留前不留 eslint：
semi-spacing - 代码块首尾留空格 eslint：
space-before-blocks - 圆括号间不留空格 eslint：
space-in-parens - 一元运算符后面跟一个空格 eslint：
space-unary-ops - 注释首尾留空格 eslint：
spaced-comment - 模板字符串中变量前后不加空格 eslint：
template-curly-spacing - 检查
NaN的正确姿势是使用isNaN()eslint：use-isnan - 用合法的字符串跟
typeof进行比较操作 eslint：valid-typeof - 自调用匿名方式（IIFEs）使用括号包裹 eslint：
wrap-iife yield *中的*前后都要有空格 eslint：yield-star-spacing- 请书写优雅的条件语句（avoid Yada conditions） eslint：
yoda - 不要使用分号 eslint：
semi - 不要使用
(,[, or等作为一行的开始。 eslint：no-unexpected-multiline`
例子
下面解释一下初始化的一个.eslintrc.js（vue.cli自动生成的）
module.exports = {
root: true,
parserOptions: {
parser: 'babel-eslint'
},
env: {
browser: true,
},
extends: [
// https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
// consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
'plugin:vue/essential',
// https://github.com/standard/standard/blob/master/docs/RULES-en.md
'standard'
],
// required to lint *.vue files
plugins: [
'vue'
],
// add your custom rules here
rules: {
// allow async-await
'generator-star-spacing': 'off',
// allow debugger during development
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
}
}
解析器（parser）：使用了babel-eslint，这个可以在package.json中找到，说明我们已经安装过该解析器了。
环境配置（env）：在浏览器中使用eslint。
继承（extends）：该配置文件继承了standard规则，具体规则自己看文档，中文版。
规则（rules）：
- arrow-parems 允许箭头函数参数使用括号。
- generator-star-spacing 允许方法之间加星号。
- no-debugger’ 允许在开发环境下使用debugger。
ps：在rules中每个配置项后面第一个值是eslint规则的错误等级。
- “off” 或 0 - 关闭这条规则
- “warn” 或 1 - 违反规则会警告（不会影响项目运行）
- “error” 或 2 - 违反规则会报错（屏幕上一堆错误代码~）