为何ESLint无法识别.vue文件中*.d.ts定义的接口？

问题原因 #

• ESLint 默认不会自动关联.vue文件与项目中的.d.ts类型声明文件，尤其是<script setup lang="ts">语法下，@typescript-eslint解析器可能没正确读取到全局类型声明。
• 项目的 ESLint 或 TypeScript 配置存在遗漏：要么 ESLint 没指定依据tsconfig.json来解析类型，要么tsconfig.json没包含.d.ts文件路径，导致.vue文件里的类型无法被ESLint识别。

解决方案 #

方案1：修正ESLint与TypeScript配置 #

• 修改ESLint配置文件（如.eslintrc.cjs），在parserOptions中指定project字段，让ESLint遵循TypeScript的配置规则：

module.exports = {
  parser: 'vue-eslint-parser',
  parserOptions: {
    parser: '@typescript-eslint/parser',
    project: './tsconfig.json', // *关键配置*
    extraFileExtensions: ['.vue']
  },
  // 其他原有配置...
}

• 同步更新tsconfig.json的include数组，确保包含所有.d.ts文件：

{
  "include": ["env.d.ts", "src/**/*.ts", "src/**/*.d.ts", "src/**/*.vue"]
}

方案2：显式导入类型 #

如果不想调整全局配置，可以把env.d.ts改成模块形式，然后在.vue文件中导入类型：

1. 修改env.d.ts，添加导出语句：

// env.d.ts
export interface Operators { /* 原有定义 */ }
export interface Rule { /* 原有定义 */ }
export type operator = /* 原有定义 */
export {} // 确保文件成为模块

2. 在.vue的<script setup lang="ts">中导入：

import type { Rule } from '../env.d.ts' // 路径根据实际情况调整

方案3：临时全局声明（不推荐） #

如果只是临时解决，可以在ESLint配置中手动把Rule声明为全局只读变量：

module.exports = {
  globals: {
    Rule: 'readonly'
  },
  // 其他原有配置...
}

这种方式会跳过TypeScript的类型校验，仅适合临时测试，不建议长期使用。

内容的提问来源于stack exchange，提问作者coding-bug