如何为.eslintrc.js开启ESLint语法提示？

可能的原因及对应方案 #

1. 安装ESLint类型依赖 #

如果项目未安装ESLint的TypeScript类型定义，JSDoc注释里的类型引用无法被编辑器识别。执行以下命令安装：

npm install --save-dev @types/eslint
# 或使用yarn
yarn add -D @types/eslint

2. 规范注释与配置的位置 #

确保JSDoc注释直接写在导出的配置对象上方，避免位置偏移导致编辑器无法解析：

/**
 * @type {import('eslint').Linter.Config}
 */
module.exports = {
  env: {
    browser: true,
    es2021: true
  },
  extends: ['eslint:recommended'],
  parserOptions: {
    ecmaVersion: 'latest'
  },
  rules: {
    'no-unused-vars': 'warn'
  }
};

若使用ES模块导出（export default），注释需放在export default代码段上方。

3. 配置编辑器的TypeScript服务 #

以Vim为例，需确保使用的LSP客户端（如coc.nvim、nvim-lspconfig）已启用TypeScript语言服务，且项目根目录存在tsconfig.json，将.eslintrc.js纳入解析范围：

// tsconfig.json
{
  "compilerOptions": {
    "module": "ESNext",
    "target": "ESNext",
    "strict": true
  },
  "include": [".eslintrc.js"]
}

4. 改用ES模块类型导入 #

若JSDoc注释仍不生效，可将配置文件改为ES模块格式（需在package.json中添加"type": "module"），直接引入类型：

import type { Linter } from 'eslint';

const config: Linter.Config = {
  // 配置内容
};

export default config;

无需先写JSON再转JS #

只要解决类型识别相关问题，完全可以直接在.eslintrc.js中编写配置并获得语法提示，无需来回转换格式。

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