如何为.eslintrc.cjs文件的ESLint配置属性开启自动补全？

方案一：给.cjs文件添加JSDoc类型注释 #

在你的.eslintrc.cjs文件顶部添加类型注释，明确指定导出对象的类型为ESLint的配置类型，就能触发编辑器的自动补全。步骤如下：

1. 确保已经安装了@types/eslint包（如果没装，执行npm install -D @types/eslint）
2. 在配置文件顶部添加JSDoc注释，然后导出配置：

/** @type {import('eslint').Linter.Config} */
module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true
  },
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:react/recommended'
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaFeatures: {
      jsx: true
    },
    ecmaVersion: 'latest',
    sourceType: 'module'
  },
  plugins: ['@typescript-eslint', 'react'],
  rules: {
    // 自定义规则
  }
};

编辑器会识别这个类型注释，自动补全ESLint配置的所有属性和可选值。

方案二：改用ESLint扁平配置（推荐） #

ESLint现在推荐使用扁平配置格式，这种格式下你可以直接使用.eslint.config.js（因为项目是ESM类型，这个文件会被当作ESM处理），天然支持TypeScript类型自动补全，无需额外配置：

1. 创建.eslint.config.js文件，内容示例：

import type { Linter } from 'eslint';
import react from 'eslint-plugin-react';
import tsEslint from '@typescript-eslint/eslint-plugin';
import tsParser from '@typescript-eslint/parser';

const config: Linter.Config[] = [
  {
    files: ['**/*.{js,jsx,ts,tsx}'],
    env: {
      browser: true,
      es2021: true,
      node: true
    },
    languageOptions: {
      parser: tsParser,
      parserOptions: {
        ecmaFeatures: { jsx: true },
        ecmaVersion: 'latest',
        sourceType: 'module'
      }
    },
    plugins: {
      react,
      '@typescript-eslint': tsEslint
    },
    rules: {
      ...react.configs.recommended.rules,
      ...tsEslint.configs.recommended.rules,
      // 自定义规则
    }
  }
];

export default config;

2. 移除旧的.eslintrc.cjs文件，编辑器会直接根据导入的Linter.Config类型提供完整的自动补全。

这个方案更符合ESLint的未来发展方向，同时彻底解决自动补全问题。

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