ESLint 使用

ESLint

使用

环境 Node.js >=16.0.0 需要 SSL 支持，在 repository 下运行：

npm init @eslint/config

用 ESLint 检查某个文件：

# 有 eslint 问题会抛出错误
pn eslint yourfile.js
# 尝试自动修复
pn eslint yourfile.js --fix

配置

npm init @eslint/config 会在项目目录下生成 .eslintrc.js 文件，例如：

module.exports = {
    "extends": [
        "eslint:recommended"
    ],
    "rules": {
        "semi": 2,
        "quotes": 2,
    }
}

extends 的 devDep 包命名为 eslint-config-yourConfig 的时候，可以用 "yourConfig"

env

env 提供了预设的全局变量：

• browser：浏览器全局变量
• node：node 全局变量
• es6：ES6
• es2016~es2022：ES7~ES13
• worker：web workers 全局变量
• amd：定义了 AMD 的 require() 和 define()
• mocha：mocha
• jest：jest
• mongo：MongoDB

globals 配置可以自定义全局变量：

{
    "env": {
        "es6": true,
        "browser": true
    },
    "globals": {
        "Promise": "off",   // off-禁用
        "var1": "writable", // 可用
        "var2": "readonly"  // 只读
    }
}

react 建议使用 eslint-plugin-react 插件。

规则

规则ID

• off/0：关闭
• warn/1：warning，不影响 exit code
• error/2：error，exit code 为 1

配置文件

// .eslintrc.js
{
    "rules": {
        "eqeqeq": "off",
        "curly": "error",
        "quotes": ["error", "double"]
    }
}

使用 "plugin/rule" 来使用一个插件的规则：

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

使用 "overrides" 配置来覆盖另一个文件的规则：

{
    "rules": {...},
    "overrides": [
        {
            "files": ["*-test.js", "*.spec.js"],
            "rules": {
                "no-unused-expressions": "off"
            }
        }
    ]
}

禁止使用注释禁用：

{
    "rules": {...},
    "noInlineConfig": true
}

提示无用的注释禁用规则：

{
    "rules": {...},
    "reportUnusedDisableDirectives": true
}

插件

parser

ESLint 默认使用 Espree 作为 parser，可以通过 "parser" 字段指定自定义 parser：

{
    "parser": "@typescript-eslint/parser",
    "rules": {
        "semi": "error"
    }
}

能用的 ESLint parser：

• Esprima
• @babel/eslint-parser
• @typescript-eslint/parser：处理 TypeScript 来转换成 ESTree 兼容的格式

processor

插件可能提供了 processor，Processor 可以从其他类型的文件里提取 js 给 ESLint 检查，或者预处理 js 代码。

使用 "processor" 字段配置，通常格式是 "{plugin}/{processor}"：

{
    "plugins": ["a-plugin"],
    "processor": "a-plugin/a-processor"
}

"overrides" 字段里可以指定 processor 处理的文件类型：

{
    "plugins": ["a-plugin"],
    "overrides": [
        {
            "files": ["*.md"],
            // "files": ["**/*.md/*.js"] 
            // 只检查 md 文件里的 js 代码块
            "processor": "a-plugin/markdown"
        }
    ]
}

插件配置

插件是第三方的，通常使用 npm 安装。使用 "plugins" 字段配置， "eslint-plugin-" 前缀可以省略：

{
    "plugins": [
        "plugin1",  // eslint-plugin-plugin1
        "eslint-plugin-plugin2",
        "@jquery/jquery",    // @jquery/eslint-plugin-jquery
        "@foobar"   // @foobar/eslint-plugin
    ]
}

注意：

1. plugins 通过相对路径/node_modules 引用，即使用 require('eslint-plugin-pluginname') 获取；
2. 通过 "extends" 加载的 plugins 也会从 node_modules 目录下查找

使用插件定义的配置

使用插件定义的配置（rules, env）时遵循以下 convention（约定）：

• eslint-plugin-foo -> foo/some-rule
• @foo/eslint-plugin -> @foo/some-config
• @foo/eslint-plugin-bar -> @foo/bar/some-environment

{
    // ...
    "plugins": [
        "jquery",   // eslint-plugin-jquery
        "@foo/foo", // @foo/eslint-plugin-foo
        "@bar"      // @bar/eslint-plugin
    ],
    "extends": [
        "plugin:@foo/foo/recommended",
        "plugin:@bar/recommended"
    ],
    "rules": {
        "jquery/a-rule": "error",
        "@foo/foo/some-rule": "error",
        "@bar/another-rule": "error"
    },
    "env": {
        "jquery/jquery": true,
        "@foo/foo/env-foo": true,
        "@bar/env-bar": true,
    }
    // ...
}

忽略文件

使用 "ignorePatterns" 字段设置 ESLint 忽略的文件：

{
    "ignorePatterns": ["templ.js", "**/vendor/*.js"],
    "rules": {
        // ...
    }
}