如何为eslintrc.js添加类型检查与内置规则类型定义并适配所有ESLint扩展？

推荐方案：用ESLint官方defineConfig #

ESLint 8.21版本之后自带了类型支持，借助@eslint/js包里的defineConfig函数，不仅能拿到核心规则的智能提示，第三方扩展规则的类型也能自动识别。

操作步骤： #

1. 安装依赖

npm install @eslint/js typescript --save-dev

2. 改写你的eslintrc.js

const { defineConfig } = require('@eslint/js')

module.exports = defineConfig({
  rules: {
    // 编写时会自动弹出规则说明、可选值和参数结构
    quotes: ["warn", "single", { avoidEscape: true }],
    // @typescript-eslint这类扩展的规则也能正常触发智能提示
    "@typescript-eslint/no-unused-vars": "error"
  }
})

备选方案：自定义类型包装函数（兼容旧版ESLint） #

如果使用的是低于8.21的ESLint版本，可以自己写个类型包装函数，结合社区的类型定义覆盖所有规则。

操作步骤： #

1. 安装类型依赖

npm install @types/eslint @typescript-eslint/utils --save-dev

2. 创建defineESLint函数并使用

/**
 * 整合ESLint核心和扩展的配置类型
 * @typedef {import('@types/eslint').ESLint.ConfigData & import('@typescript-eslint/utils').TSESLint.Linter.Config} ESLintConfig
 */

/**
 * 给配置添加类型提示的包装函数
 * @param {ESLintConfig} config
 * @returns {ESLintConfig}
 */
function defineESLint(config) {
  return config
}

module.exports = defineESLint({
  rules: {
    quotes: ["warn", "single", { avoidEscape: true }],
    "@typescript-eslint/no-unused-vars": ["error", { argsIgnorePattern: "^_" }]
  }
})

适配所有扩展的注意事项 #

• 多数流行扩展（如@typescript-eslint/eslint-plugin、eslint-plugin-react）自带类型声明，安装后就能自动识别规则
• 如果某个扩展没内置类型，可以手动安装对应的@types/[扩展包名]，比如@types/eslint-plugin-react

对比JSON Schema方案的优势 #

• 实时类型检查：编写配置时立刻能发现规则值或格式错误
• 完整智能提示：规则描述、可选值、参数结构直接弹出，无需跳转外部文档
• 自动适配扩展：安装新扩展后，规则提示自动更新，不用手动维护schema

内容的提问来源于stack exchange，提问作者Dimava