ESLint 规范项目代码

ESLint 由 JavaScript 红宝书 作者 Nicholas C. Zakas 编写， 2013 年发布第一个版本。 NCZ 以可扩展、每条规则独立、不内置编码风格为理念编写了一个 lint 工具。

中文官方网站

英文官方网站

什么是 ESLint ？

ESLint 是在 ECMAScript/JavaScript 代码中识别和报告模式匹配的工具，它的目标是保证代码的一致性和避免错误。在许多方面，它和 JSLint、JSHint 相似，除了少数的例外：

• ESLint 使用 Espree 解析 JavaScript。
• ESLint 使用 AST 去分析代码中的模式
• ESLint 是完全插件化的。每一个规则都是一个插件并且你可以在运行时添加更多的规则。

使用

全局安装

npm install -g eslint

初始化

　　如果你的项目还没有配置文件（.eslintrc）的话，可以通过指定–init参数来生成一个新的配置文件：

　　eslint --init

　　运行eslint –init后，会在当前目录下生成一个.eslintrc文件，你可以在这个文件中配置一些规则。

使用 ESLint 检测任何 JavaScript 文件：

　　eslint test.js test2.js

ESLint 中一些规则运行命令它可以帮你自动修复

　　eslint test.js --fix

配置

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

1. 内嵌配置：将配置信息以注释的形式写在要检验的文件内
2. 文件配置：利用javascript、json、yml语言的语法，生成名为.eslintrc.*的配置文件，将配置信息写到文件内

　　　　　　ESLint 支持几种格式的配置文件，如果同一个目录下有多个配置文件，ESLint 只会使用一个。优先级顺序如下：

1. 1. JavaScript - 使用 .eslintrc.js 然后输出一个配置对象。
   2. YAML - 使用 .eslintrc.yaml 或 .eslintrc.yml 去定义配置的结构。
   3. JSON -使用 .eslintrc.json 去定义配置的结构，ESLint 的 JSON 文件允许 JavaScript 风格的注释。
   4. Deprecated -使用 .eslintrc，可以使 JSON 也可以是 YAML。
   5. package.json - 在 package.json 里创建一个 eslintConfig属性，在那里定义你的配置。

文件配置方式

env：你的脚本将要运行在什么环境中

Environment可以预设好的其他环境的全局变量，如brower、node环境变量、es6环境变量、mocha环境变量等

'env': {
    'browser': true,
    'commonjs': true,
    'es6': true
  },

globals：额外的全局变量

示例：

globals: {
    vue: true,
    wx: true
  },

rules：开启规则和发生错误时报告的等级

示例：

'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
  }

规则的错误等级有三种：

0或'off'：关闭规则。
1或'warn'：打开规则，并且作为一个警告（并不会导致检查不通过）。
2或'error'：打开规则，并且作为一个错误 (退出码为1，检查不通过)。

参数说明：

参数1 ： 错误等级 
参数2 ： 处理方式

"comma-dangle": ["error", "never"],

上述配置只是简要将最基本的一些配置罗略出来，如果有需要建议去上方官网中查看。

配置代码注释方式

有时我们可能要在代码中忽略eslint的某种检查，或者加入某种特定检查，此时我们可以用如下的方式：

示例：

1. 忽略 no-undef 检查

/* eslint-disable no-undef */ 

1. 忽略 no-new 检查

/* eslint-disable no-new */ 

1. 设置检查

/*eslint eqeqeq: off*/
/*eslint eqeqeq: 0*/

eslint 检查指令

1. 检查且修复

eslint * --fix

1. 检查指定文件

eslint app.js --fix

开发工具上的使用

WebStorm

Preferences -> Languages & Frameworks -> JavaScript -> Code Quality Tools -> Eslint -> Enable (勾选) -> Apply -> OK

Atom

安装linter-eslint

Sublime

1. 在 package control 中先安装SublimeLinter

2. 再安装SublimeLinter-contrib-eslint

3. 在项目目录下新建 .eslintrc 文件，自定义规则

4. 重新载入文件应该就生效了（不生效的话 Ctrl+Shift+P 调用命令面板 找到 sublimelinter: toggle linter 设置生效就好了）

结语

Eslint 对于每一个开发者而言都是非常值得使用的，这样会强制你写出高质量且整洁的代码，所以建议大家将Eslint集成进入，来提高项目的质量。