ESLint入门

eslint是识别和报告js代码模式匹配的工具，目标是保证代码的一致性和避免错误。
eslint作用：

js代码语法校验
js代码格式校验

安装

用yarn安装eslint

yarn add eslint --dev

设置配置文件

npx eslint --init

通过该命令，引导用户定制js的运行环境是Browser还是Node，采用的模块化方案是commonjs还是import/export等，最终生成一个配置文件。配置文件示例：

{
 env: {
    browser: true,
    es6: true,
  },
  rules: {
    semi: ["error", "never"],
    quotes: ["error", "double"],
  },
}

到目前位置该配置文件定义了解析js文件的策略，根据这个策略可以将js文件转换未抽象语法树。

在任何js文件上使用eslint:

npx eslint yourfile.js

有错误控制台会报错，--fix可以自动修复错误：

npx eslint yourfile.js --fix

配置eslint

extends

配置文件可以被基础配置的规则继承。extends属性值可以是：

配置的字符串
字符串数组，每个配置继承前面的配置

plugins

eslint支持第三方插件，插件名称可以省略eslint-plugin-：

plugins:['prettier']

parser

eslint parser主要任务是将源码解析为抽象语法树，eslint默认采用Espree作为其解析器。

{
  parser: 'espree'
}

parser options

parser options是对应解析器的选项，espree可用的解析选项有：

ecmaVersion，设置3, 5 (default), 6, 7, 8, 9, or 10
sourceType，设置为script or module；
ecmaFeatures，你想使用的语言特性
- jsx，是否启动jsx

parser options示例：

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

完整espree parse options可参考：https://github.com/eslint/espree

rules

可以使用注释或配置文件修改项目中要使用的规则。规则的值必须为下列值之一：

"off"或0，关闭规则
"warn"或1，视为警告
"error"或2，视为错误

eslint默认规则：

潜在的js语法或逻辑错误
- no-constant-condition：禁止在条件中使用常量表达式；
- no-direction: 循环停止条件永远达不到，无限循环是个bug。
最佳实践，帮助避免一些错误
- eqeqeq：要求使用 === 和 !==；
- array-callback-return：强制数组的回调方法有return语句；
与变量声明有关
- no-unused-vars：禁止出现未使用的变量
- no-shadow-restricted-names：关键字不能被遮蔽
代码风格准则
- array-bracket-newline：在数组开括号后和闭括号前强制换行；
- brace-style：大括号风格要求；
与es6相关
- constructor-super：验证构造函数中 super() 的调用；
- no-class-assign：不允许修改类声明的变量；

eslint默认规则完整列表：https://eslint.bootcss.com/docs/rules/

集成

vscode eslint extension

安装

eslint插件依赖于eslint library，所以项目要安装eslint:

yarn add eslint --dev

项目需要一个.eslintrc配置文件，可以通过手动创建也可以借助eslint --init创建。
当项目中的js文件代码风格不一致，工作区的文件会有错误提示，控制台problems也会给出详细的错误。

settings options

启动自动修复

  "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    }

eslint-loader

eslint-loader用于打包前检测代码是否符合项目代码风格。

安装

项目需要安装eslint和eslint-loader。

使用

webpack配置：

module.exports = {
  entry: "./index.js",
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'eslint-loader',
      }
    ]
  }

Options

fix，eslint是否要修复代码

module.exports = {
  entry: "./index.js",
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'eslint-loader',
        options: {
          fix: true
        }
      }
    ]
  }
};

开发

可共享的配置

可以将配置文件发布到npm以共享。模块名称以eslint-config-开头。示例配置：

module.exports = {
  rules: {
    semi: ["warn", "never"],
  },
};

开发插件

插件名称必须以eslint-plugin-开头，如果ESLint要使用插件中规则，可以使用不带前缀的插件名，后跟/，最后加规则名。示例：rules:{myplugin/rule1:"error"}。插件示例：

module.exports = {
    rules: {
        "rule1": {
            create: function (context) {
                // rule implementation ...
            }
        }
    }
};

FAQ

eslint检测代码是否符合规范的原理
eslint parser 将源码编译为ast，遍历ast验证节点与配置的规则是否符合。