ESLint入门

1、ESLint是什么？

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

2、为何要使用ESLint？

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

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

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

3、如何使用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）。

4、经常使用的ESLint共享配置

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

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

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

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

5、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 来读取配置信息。