8.1 eslint

第一章 ESLint简介

1.1 简介

ESLint是一个插件化的javascript代码检测工具，它可以用于检查常见的JavaScript代码错误，也可以进行代码 风格检查，可以根据自我们己的喜好指定一套ESLint配置，然后应用到所编写的项目上，从而实现辅助编码规范的执 行，有效控制项目代码的质量，规范项目风格，减少不必要的错误。

ESLint 主要有以下特点：

• 默认规则包含所有 JSLint、JSHint 中存在的规则，易迁移；
• 规则可配置性高：可设置「warn」、「error」两个 error 等级，或者直接 off（禁用）；
• 包含代码风格检测的规则；
• 支持插件扩展、自定义规则。

1.2 类似工具

• JSLint：用来检测代码规范、变量定义规范、代码格式检测等代码质量问题的js脚本，不可以编写
• JSHint：jshint是一个javaScript语法和风格的检查工具，但检查不出逻辑问题。

eslint的优势你可以使用它附带的规则，或者你可以用别人或者你自己创建的规则来扩展它；但是eslint的速度相对于jsLint较慢。

第二章 ESLint安装使用

2.1 本地安装

如果要将ESLint作为项目构建系统的一部分，建议在本地进行安装:

npm install eslint --save-dev

然后设置一个配置文件

./node_modules/.bin/eslint --init

运行这行命令会有一系列的选项供我们选择，我们可以选择自己喜欢的风格或者其他存在可供选择的公司的配置来进行我们的代码测试; 配置成功会显示如下图：

如图我选择了google的代码风格，其配置文件使用JavaScript语言来编写，内容如下图，eslint还提供了json和yaml文件来编写配置文件;

下图是自己选择配置来生成我们的配置文件及内容：

运行后eslint --init，在你的项目文件夹下会存在一个.eslintrc.js文件。

2.2 全局安装简配

如果要使ESLint可用于跨所有项目运行的工具，我们建议在全局安装ESLint。

npm install -g eslint

您应该设置一个配置文件，其配置过程与本地配置一致

eslint init

您可以在任何文件或目录下运行ESLint：

$ eslint yourfile.js

第三章 配置文件参数介绍

ESLint的配置都可以被设置，意味着你可以关闭每个规则，或者使用基本语法来验证，还可以混合并匹配捆绑的规则和自定义规则， 使ESLint完美的适用于您的项目。

3.1 配置eslint方法

• 配置注释： 使用JavaScript注释将配置信息直接嵌入到文件中。
• 配置文件 - 使用JavaScript，JSON或YAML文件来指定整个目录及其所有子目录的配置信息，使用.eslintrc.*文件或者文件中带有eslintConfig 字段的package.json文件来配置，这些都是ESLint自动寻找和读取的，也可以在命令行中指定一个配置文件。

3.2 配置信息

• 环境 - 您的脚本旨在运行的环境。每个环境都带有一组预定义的全局变量
• Globals - 您的脚本在执行期间访问的其他全局变量
• 规则 - 启用了哪些规则以及什么错误级别

这些选项可以帮助你有效地使用eslint来控制你的代码质量和代码规范。

3.3 配置解释器

eslint允许我们定义支持的JavaScript语言选项，ESLint需要ECMAScript 5语法，通过使用解析器选项来覆盖该设置以支持其他ECMAScript版本以及JSX。 这里需要注意支持JSX和支持react语法是不同的，解析器选项通过使用属性在文件中设置，常见的属性有：

• ecmaVersion 设置为3，5（默认），6，7或8以指定要使用的ECMAScript语法的版本
• sourceType- 设置为"script"（默认），或者"module"您的代码在ECMAScript模块中

• ecmaFeatures - 一个对象，指出您要使用哪些其他语言功能

  • globalReturn- return在全局范围内允许语句
  • impliedStrict- 启用全局严格模式
  • jsx- 启用JSX

下面是一个代码实例

{
    "parserOptions": {
        "ecmaVersion": 6,
        "sourceType": "module",
        "ecmaFeatures": {
            "jsx": true
        }
    },
    "rules": {
        "semi": 2
    }
}

默认情况下，ESLint使用Espree作为其解析器。使用自定义解析器时，parserOptionsESLint默认情况下仍然需要配置属性才能正常使用ECMAScript 5中的功能

3.4 指定环境

环境定义了预定义的全局变量。常见的可用的环境有：

• browser - 浏览器全局变量；
• node - Node.js全局变量和Node.js范围。
• commonjs - CommonJS全局变量和CommonJS范围（将其用于使用Browserify / WebPack的浏览器代码）
• es6- 启用除模块之外的所有ECMAScript 6功能

要指定配置文件中的环境，请使用该env键，并通过设置每个环境指定要启用的环境true，以下功能可以启用浏览器和Node.js环境：

{
    "env": {
        "browser": true,
        "node": true
    }
}

3.5 指定全局变量

如果在文件中使用全局变量，那么有必要指定这些全局变量，以便ESLint不会对其使用情况提出警告。你可以使用文件中的注释或配置文件来定义全局变量。

{
    "globals": {
        "var1": true,
        "var2": false
    }
}

3.6 配置插件

ESLint支持使用第三方插件。在使用插件之前，您必须使用npm进行安装。

要在配置文件中配置插件，请使用plugins包含插件名称列表的键。该eslint-plugin-前缀可以从插件名称被省略

{
    "plugins": [
        "plugin1",
        "eslint-plugin-plugin2"
    ]
}

3.7 配置规则

ESLint附带了大量的规则。您可以使用配置注释或配置文件修改项目使用的规则。要更改规则设置，必须将规则ID设置为以下值之一：

• "off"或0- 关闭规则
• "warn"或1- 将规则作为警告（不影响退出代码）
• "error"或2- 将规则转为错误（触发时退出代码为1）

要配置配置文件内的规则，请使用该rules键以及错误级别和您要使用的任何选项。例如：

{
    "rules": {
        "eqeqeq": "off",
        "curly": "error",
        "quotes": ["error", "double"]
    }
}

要配置在插件中定义的规则，您必须在规则ID的前面加上插件名称和a /。例如

{
    "plugins": [
        "plugin1"
    ],
    "rules": {
        "eqeqeq": "off",
        "curly": "error",
        "quotes": ["error", "double"],
        "plugin1/rule1": "error"
    }
}

3.8 配置文件格式

• JavaScript - 使用.eslintrc.js和导出包含配置的对象
• YAML - 使用.eslintrc.yaml或.eslintrc.yml定义配置结构
• JSON - 用于.eslintrc.json定义配置结构。
• package.json - eslintConfig在package.json文件中创建一个属性，并在那里定义您的配置

如果同一目录中有多个配置文件，ESLint将只使用一个配置文件。优先顺序是：

1 .eslintrc.js
2 .eslintrc.yaml
3 .eslintrc.yml
4 .eslintrc.json
5 .eslintrc
6 package.json

3.9 扩展配置文件

配置文件可以从基本配置扩展启用的规则集；

该extends属性值可以是：

• 该extends属性值可以是
• 字符串数组：每个附加配置都扩展了以前的配置

ESLint会递归扩展配置，因此基本配置也可以具有extends属性；

一个extends属性值"eslint:recommended"允许的核心规则，报告共同的问题，推荐我们使用的规则，我们可以在http://eslint.org/docs/rules/看到推荐的规则并且选择合适的规则来配置： 推荐的子集只能在主要版本的ESLint中更改。

使用eslingt --init令可以创建一个配置，以便扩展推荐的规则

JavaScript格式的配置文件示例

module.exports = {
    "extends": "eslint:recommended",
    "rules": {
        // enable additional rules
        "indent": ["error", 4],
        "linebreak-style": ["error", "unix"],
        "quotes": ["error", "double"],
        "semi": ["error", "always"],

        // override default options for rules from base configurations
        "comma-dangle": ["error", "always"],
        "no-cond-assign": ["error", "always"],

        // disable rules from base configurations
        "no-console": "off",
    }
}

在我们项目具体过程中配置eslint规则实际要根据需求来配置，这需要我们在实践中使用熟悉，而且还有其他的选项可以配置，大家可以在eslint官网跟踪学习。

参考文档

• eslint官网
• rules