ESLint入门

一、ESLint是什么？

ESLint是一个用于识别和报告ECMAScript/JavaScript中代码格式的工具，目的是使代码风格更加统一和避免错误。ESLint的理念是可扩展、每条规则独立、不内置编码风格。

二、为什么要使用ESLint？

在多人协作时，统一的代码风格更具可读性、可维护性。即使是单人开发，也可以使用ESLint来规范自己的书写规范。毕竟，规范化代码也是提升效率的一个方面。

而且，ESLint可以集成到主流的编辑器和构建工具中，以便我们在编写的代码的同时进行lint。

以 WebStorm 为例，只要全局安装 ESLint 或者在项目中依赖中添加 ESLint ，然后在设置里开启 ESLint 即可。其他编辑可以从官方文档（https://eslint.org/docs/user-guide/integrations）中获得具体信息。

三、如何使用ESLint？

1 安装和使用
        有两种方式去安装ESLint：全局和本地。

1.1 本地安装和使用
        如果要将ESLint作为项目构建系统的一部分，那么选择在本地进行安装。 您可以使用npm：

npm install eslint --save-dev

然后您需要建立一个配置文件：

./node_modules/.bin/eslint --init

接着，你可以在您的项目根目录运行ESLint：

./node_modules/.bin/eslint yourfile.js

您使用的任何插件或可共享配置也必须在本地安装，以此与本地安装的ESLint配合使用。

1.2 全局安装和使用
        如果要使ESLint可以运用你的所有项目，那么选择在全局安装ESLint。 你可以使用npm：

npm install -g eslint

然后您需要建立一个配置文件：

eslint --init

接着，你可以在您的项目根目录运行ESLint：

eslint yourfile.js

您使用的任何插件或可共享配置也必须在全局安装，以此与全局安装的ESLint配合使用。

2 配置
        在运行eslint --init之后，会在您的目录建立一个.eslintrc文件。在其中您将看到一些如下的配置规则：

{
　　"rules": {
　　　　"semi": ["error", "always"],
　　　　"quotes": ["error", "double"]
　　}
}

“semi”和“quotes”是ESLint中规则的名称。 第一个值是规则的错误级别，可以是以下值之一：

• "off" 或 0 - 关闭规则
• "warn" 或 1 - 将规则作为警告
• "error" 或 2 - 将规则作为错误

这三个错误级别允许您细微地控制ESLint如何应用规则。

您的.eslintrc配置文件将同样包含该行：

"extends": "eslint:recommended"

由于这一行，规则页面上标记为“”的所有规则都将被打开。

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

1. 注释配置 - 使用JavaScript注释将配置信息直接嵌入文件。
2. 配置文件 - 使用JavaScript，JSON或YAML文件来指定整个目录及其所有子目录的配置信息。

这可以是格式为.eslintrc.*文件或package.json中的eslintConfig域，这两个ESLint都将自动查找和读取，也可以在命令行中指定配置文件。

有几个可配置的信息：

• Environment - 您的脚本被设计在所运行的环境。每个环境都带有一组预定义的全局变量。
• Globals - 您的脚本在执行期间访问的其他全局变量。
• Rules - 启用的规则和错误的级别。

更多配置选项和细节，看官方配置文档（http://eslint.org/docs/user-guide/configuring）。

四、常用的ESLint共享配置

因为一个配置文件可以被基础配置中的以启用的规则继承。一些公司或组织会开源出来他们使用的配置，它们以共享配置（Shareable Cinfig）的形式存在。

备注：共享配置是一个npm包，它输出一个配置对象。要确保这个包安装在ESLint能请求到的目录下。将extends的属性值指定为该对象名称即可实现继承。

1 Standard（https://github.com/standard/eslint-config-standard）

2 Airbnb（https://github.com/airbnb/javascript)

五、webpack 整合 ESLint

webpack 中通过添加 loader 的方式来使用 eslint，该 loader 名为 eslint-loader。在 webpack 中的配置如下。

/* 这是webpack配置文件的内容，省略无关部分 */
{
  module: {
    preLoaders: [{
      test: /\.js$/, // 只针对js文件
      loader: 'eslint', // 指定启用eslint-loader
      include: dirVars.srcRootDir, // 指定审查范围仅为自己团队写的业务代码
      exclude: [/bootstrap/], // 剔除掉不需要利用eslint审查的文件
    }],
  },
  eslint: {
    configFile: path.resolve(dirVars.staticRootDir, './.eslintrc'), // 指定eslint的配置文件在哪里
    failOnWarning: true, // eslint报warning了就终止webpack编译
    failOnError: true, // eslint报error了就终止webpack编译
    cache: true, // 开启eslint的cache，cache存在node_modules/.cache目录里
  }
}

当然也可以把 eslint-loader 放在 loaders 中，但是放置到 preLoaders 中可以先于 loader 进行处理，若 ESLint 检查到了问题就会在此停掉。如果你使用了 babel 等类似的 loader，那么通过 webpack 编译前后的代码相差就很大了，这往往导致无法 ESLint 的检查。

eslint-loader 可以采用一个配置项 eslint 来进行配置，默认会使用项目根目录下的配置文件 .eslintrc 来读取配置信息。