eslint+prettier对部分特殊文件可以不验证的解决方案，例如：/* eslint-disable no-unused-vars */

项目场景：

今天公司安排为一个项目添加eslint+prettier。 eslint配置信息如下，其中no-unused-vars的配置是以警告级别提示禁止未使用的变量的问题

import js from "@eslint/js";
import globals from "globals";
import reactHooks from "eslint-plugin-react-hooks";
import reactRefresh from "eslint-plugin-react-refresh";
import tseslint from "typescript-eslint";
import prettier from "eslint-config-prettier";

export default tseslint.config(
  { ignores: ["dist"] }, // 忽略dist目录中的文件
  {
    extends: [
      js.configs.recommended, // 扩展@eslint/js的推荐配置
      ...tseslint.configs.recommended, // 扩展@typescript-eslint的推荐配置
      prettier, // 使用prettier的配置覆盖可能的冲突
    ],
    files: ["**/*.{ts,tsx}"], // 针对所有.ts和.tsx文件进行配置
    languageOptions: {
      ecmaVersion: 2023, // 使用ECMAScript 2023标准
      globals: {
        ...globals.browser, // 使用浏览器全局变量
        React: "readonly", // 将React设置为只读全局变量
      },
    },
    plugins: {
      "react-hooks": reactHooks, // 使用eslint-plugin-react-hooks插件
      "react-refresh": reactRefresh, // 使用eslint-plugin-react-refresh插件
    },
    rules: {
      ...reactHooks.configs.recommended.rules, // 扩展react-hooks的推荐规则
      "react-refresh/only-export-components": [
        "warn", // 警告级别
        { allowConstantExport: true }, // 允许导出常量
      ],
      "no-console": "warn", // 警告级别，禁止使用console
      "no-unused-vars": [
        "warn", // 警告级别，禁止未使用的变量
        {
          vars: "all",
          args: "none",
          ignoreRestSiblings: false,
          varsIgnorePattern: "^_|^exports?|^module$",
          varsIgnorePattern: "^_", // 忽略以 _ 开头的变量
          argsIgnorePattern: "^_", // 忽略以 _ 开头的参数
          caughtErrors: "all",
          caughtErrorsIgnorePattern: "^_",
        },
      ],
      "@typescript-eslint/explicit-function-return-type": "off", // 关闭强制函数返回类型的规则
      "@typescript-eslint/explicit-module-boundary-types": "off", // 关闭强制模块边界类型的规则
      "@typescript-eslint/no-explicit-any": "warn", // 警告级别，禁止使用any类型
    },
    settings: {
      react: {
        version: "detect", // 自动检测React版本
      },
    },
  }
);

问题描述

其中eslint中有一个对声明但未使用的变量的检证提示的设置，配置后export的变量就会提示警告未使用 执行npm run lint，提示信息如下

base-layout-design\src\types\component.tsx
    6:3  warning  'large' is defined but never used. Allowed unused vars must match /^_/u                  no-unused-vars
    8:3  warning  'medium' is defined but never used. Allowed unused vars must match /^_/u                 no-unused-vars
   10:3  warning  'small' is defined but never used. Allowed unused vars must match /^_/u                  no-unused-vars
   12:3  warning  'xSmall' is defined but never used. Allowed unused vars must match /^_/u                 no-unused-vars

原因分析：

虽然设置了varsIgnorePattern: "^_|^exports?|^module$", 可以对符合忽略部分符合格式的exports变量，但这种正则只是对单行进行处理

我们的代码中有大量类似的代码块，

export enum Size {
  /** 大 */
  large = "large",
  /** 中 */
  medium = "medium",
  /** 小 */
  small = "small",
  /** 最小 */
  xSmall = "x-small",
}

解决方案：

我们类似的export的枚举变量统一放在一个枚举的文件中

例如：新建一个 Message 对象，并将读取到的数据存入 Message，然后 mHandler.obtainMessage(READ_DATA, bytes, -1, buffer).sendToTarget();换成 mHandler.sendMessage()。