《前端工程化工具系列(一)—— ESLint(v9.4.0):代码质量守护者 基础篇》中介绍了 ESLint 的常用配置,这里主要介绍的是一些进阶的使用。
1 定义全局变量
1.1 自定义全局变量
在 HTML 中通过 script 标签引入第三方库的时候,会用到库中定义的全局变量。可以通过以下方式在 ESLint 中自定义全局变量来避免报错,示例中全局变量的名称为 AMap。
// eslint.config.js
export default [
{
languageOptions: {
globals: {
AMap: "readonly", // 将相应的值设置为 "可写 "或 "只读","writable"表示允许覆盖变量,"readonly"表示不允许覆盖变量。
}
}
}
];
1.2 预定义全局变量
如用到浏览器环境下的全局变量(如:window)或者 Node.js 中的全局变量(如 :global)等。
- 先安装库 globals:
pnpm add -D globals
- 在 eslint.config.js 中添加 languageOptions 配置节点:
// eslint.config.js
import globals from "globals";
export default [
{
languageOptions: {
globals: {
...globals.browser,
...globals.node,
}
}
}
];
以上还可以是 globals.jest、globals.worker、globals.commonjs、globals.jasmine 等等,详情见 globals.json 中的 key
合到一起就是:
/* eslint-disable @typescript-eslint/no-unsafe-member-access */
/* eslint-disable @typescript-eslint/naming-convention */
/* eslint-disable @typescript-eslint/no-unsafe-call */
/* eslint-disable @typescript-eslint/no-unsafe-assignment */
/* eslint-disable no-underscore-dangle */
/* eslint-disable import/no-extraneous-dependencies */
// eslint-disable-next-line import/no-unresolved
import { fixupConfigRules } from '@eslint/compat';
import { FlatCompat } from '@eslint/eslintrc';
import js from '@eslint/js';
import path from 'path';
import { fileURLToPath } from 'url';
import globals from 'globals';
// mimic CommonJS variables -- not needed if using CommonJS
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
const flatCompat = new FlatCompat({
baseDirectory: __dirname, // optional; default: process.cwd()
resolvePluginsRelativeTo: __dirname, // optional
recommendedConfig: js.configs.recommended, // optional unless you're using "eslint:recommended"
});
export default [
{
// 保证这个对象中只有这一个属性,否则会不起作用
ignores: [
'.idea',
'.vscode',
'pnpm-debug.log*',
'**/dist/',
],
},{
languageOptions: {
globals: {
AMap: 'readonly',
...globals.browser,
...globals.node,
},
},
},
...fixupConfigRules(
// 转换整个config
flatCompat.config({
extends: [
'airbnb-base',
'airbnb-typescript/base',
'plugin:@typescript-eslint/eslint-recommended',
'plugin:@typescript-eslint/recommended',
'plugin:@typescript-eslint/recommended-requiring-type-checking',
],
parserOptions: {
project: './tsconfig.json',
},
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'max-len': ['error', 200],
},
}),
),
];
2 概念
在基础篇中只是列出如何配置,没有涉及到具体的概念,这里做简单的介绍。
2.1 extends(扩展)
扩展里填的内容是包含了一系列规则的配置文件。这个一般不需要自己定义,因为有很多现成的:如ESLint自身的 eslint:recommended、eslint:all 和社区的 google、airbnb。
配置的模块名(npm的包名)要为 eslint-config-xxx,在配置中可缩写为 xxx。
2.2 plugins(插件)
extends 中是对 eslint 现有规则的一系列预设(开启或关闭),而 plugins 不仅可以定义预设,也可以自定义规则(比如自己创建一个 no-console2,区别于 ESLint 官方的 no-console),甚至可对不是 JavaScript 类型的文件(如 *ts,*.md,*.vue)扩展自己的规则。
插件的模块名一般为 eslint-plugin-xxx,在配置中可缩写为 xxx。
2.3 rules(规则)
直接配置已有规则的开启、关闭。比如强制在JavaScript中使用单引号(“quotes”: [2, “single”])。规则定义中参数的设置说明:
- “off” 或 0:关闭规则
- “warn” 或 1:警告,不会影响程序执行
- “error” 或 2:错误,程序不能执行