ESLint学习

ESLint学习

介绍ESLint

• ESLint最初是由Nicholas C. Zakas 于2013年6月创建的开源项目。它的目标是提供一个插件化的javascript代码检测工具。
• ESLint 使用 Node.js 编写，这样既可以有一个快速的运行环境的同时也便于安装。
• ESLint是一个QA工具，用来避免低级错误和统一代码的风格

---

安装

//全局安装
npm install -g eslint

配置

ESLint被设计为完全可配置的，主要有两种方式来配置ESLint：

1. 内嵌配置：将配置信息以注释的形式写在要检验的文件内
2. 文件配置：利用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.caller eslint：no-caller
• 避免对类名重新赋值 eslint：no-class-assign
• 避免修改使用const声明的变量 eslint：no-const-assign
• 避免使用常量作为条件表达式的条件（循环语句除外） eslint：no-contant-condition
• 正则中不要使用控制符 eslint：no-control-regex
• 不要使用debugger eslint：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 require eslint：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-unreachable
• finally代码块中不要再改变程序执行流程 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
• 禁止使用with eslint：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 - 违反规则会报错（屏幕上一堆错误代码~）

参考：Vue.js学习系列五 —— 从VUE-CLI来聊聊ESLint