前端工程化工具系列（二）—— ESLint(v9.12.0)：代码质量守护者进阶篇

《前端工程化工具系列（一）—— ESLint(v9.12.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：错误，程序不能执行