EsLint入门

一、介绍

官方地址：http://eslint.org/

EsLint帮助我们检查Javascript编程时的语法错误。比如：在Javascript应用中，你很难找到你漏泄的变量或者方法。EsLint能够帮助我们分析JS代码，找到bug并确保一定程度的JS语法书写的正确性。

EsLint是建立在Esprima(ECMAScript解析架构)的基础上的。Esprima支持ES5.1,本身也是用ECMAScript编写的，用于多用途分析。EsLint不但提供一些默认的规则（可扩展），也提供用户自定义规则来约束我们写的Javascript代码。

EsLint提供以下支持：

1. ES6
2. AngularJS
3. JSX
4. Style检查
5. 自定义错误和提示

EsLint提供以下几种校验：

1. 语法错误校验
2. 不重要或丢失的标点符号，如分号
3. 没法运行到的代码块（使用过WebStorm的童鞋应该了解）
4. 未被使用的参数提醒
5. 漏掉的结束符，如}
6. 确保样式的统一规则，如sass或者less
7. 检查变量的命名

二、配置

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

• 在注释中配置：使用JavaScript注释直接把配置嵌入到JS文件中。
• 配置文件：使用下面任一的文件来为全部的目录和它的子目录指定配置信息。
  • javascript：使用.eslintrc.js文件并导出一个包含配置的对象。
  • YAML：.eslintrc.yaml或者.eslintrc.yml
  • JSON：.eslintrc.json，并且此文件允许使用JS形式的注释
  • 废弃的用法：.eslintrc，此文件可以是JSON或者YAML
  • package.json：在package.json文件中创建eslintConfig属性，所有的配置包含在此属性中。

这些文件的优先级则是按照以上出现的顺序（.eslintrc.js > .eslintrc.yaml > .eslintrc.yml > .eslintrc.json > .eslintrc > package.json）。

可以被配置的信息主要分为3类：

• Environments：你的 javascript 脚步将要运行在什么环境（如：nodejs，browser，commonjs等）中。
• Globals：执行代码时脚步需要访问的额外全局变量。
• Rules：开启某些规则，也可以设置规则的等级。

三、安装

全局：npm install -g eslint

局部：npm install -D eslint

四、规则

在配置文件中可以设置一些规则。

这些规则的等级有三种：

• "off" 或者 0：关闭规则。
• "warn" 或者 1：打开规则，并且作为一个警告（不影响exit code）。
• "error" 或者 2：打开规则，并且作为一个错误（exit code将会是1）。

例如：

'rules': {
    // no-var
    'no-var': 'error',
    // 要求或禁止 var 声明中的初始化
    'init-declarations': 2,
    // 强制使用单引号
    'quotes': ['error', 'single'],
    // 要求或禁止使用分号而不是 ASI
    'semi': ['error', 'never'],
    // 禁止不必要的分号
    'no-extra-semi': 'error',
    // 强制使用一致的换行风格
    'linebreak-style': ['error', 'unix'],
    // 空格2个
    'indent': ['error', 2, {'SwitchCase': 1}],
    // 指定数组的元素之间要以空格隔开(,后面)， never参数：[ 之前和 ] 之后不能带空格，always参数：[ 之前和 ] 之后必须带空格
    'array-bracket-spacing': [2, 'never'],
    // 在块级作用域外访问块内定义的变量是否报错提示
    'block-scoped-var': 0,
    // if while function 后面的{必须与if在同一行，java风格。
    'brace-style': [2, '1tbs', {'allowSingleLine': true}],
    // 双峰驼命名格式
    'camelcase': 2,
    // 数组和对象键值对最后一个逗号， never参数：不能带末尾的逗号, always参数：必须带末尾的逗号， 
    'comma-dangle': [2, 'never'],
    // 控制逗号前后的空格
    'comma-spacing': [2, {'before': false, 'after': true}],
    // 控制逗号在行尾出现还是在行首出现
    'comma-style': [2, 'last'],
    // 圈复杂度
    'complexity': [2, 9],
    // 以方括号取对象属性时，[ 后面和 ] 前面是否需要空格, 可选参数 never, always
    'computed-property-spacing': [2, 'never'],
    // TODO 关闭 强制方法必须返回值，TypeScript强类型，不配置
    // 'consistent-return': 0
  }