如何让ESLint识别Vue3项目中的type类型导入？

核心问题分析 #

你的问题出在未正确配置.vue文件的解析链：Vue文件需要用vue-eslint-parser解析模板和脚本区块，脚本内的TypeScript语法（包括import type）则需要委托给@typescript-eslint/parser处理。直接全局设置parser: tsParser会覆盖Vue文件的解析器，导致ESLint无法识别.vue文件结构，进而停止检查。

正确配置方案 #

修改ESLint扁平配置文件，针对不同文件类型配置对应的解析器和选项：

import eslint from '@eslint/js';
import tseslint from 'typescript-eslint';
import pluginVue from 'eslint-plugin-vue';

export default tseslint.config(
  eslint.configs.recommended,
  ...tseslint.configs.recommended,
  ...pluginVue.configs['flat/recommended'],
  {
    // 配置.ts/.tsx文件的TypeScript解析器
    files: ['**/*.ts', '**/*.tsx'],
    languageOptions: {
      parser: tseslint.parser,
      parserOptions: {
        ecmaVersion: 'latest',
        project: './tsconfig.json',
      },
    },
  },
  {
    // 配置.vue文件的解析链：先用vue-eslint-parser处理整体，脚本部分委托给TypeScript解析器
    files: ['**/*.vue'],
    languageOptions: {
      parser: pluginVue.parser, // vue-eslint-parser
      parserOptions: {
        parser: tseslint.parser, // 脚本区块使用@typescript-eslint/parser
        ecmaVersion: 'latest',
        project: './tsconfig.json',
        extraFileExtensions: ['.vue'],
      },
    },
    rules: {
      // 确保类型导入规则生效，解决"必须使用类型导入"的提示
      '@typescript-eslint/consistent-type-imports': ['error', {
        prefer: 'type-imports',
        fixStyle: 'separate-type-imports',
      }],
    },
  },
);

配套检查项 #

1. 检查tsconfig.json：确保include字段覆盖所有需要检查的文件，示例：

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

2. lint-staged配置：确保能匹配.vue和.ts文件，示例：

{
  "lint-staged": {
    "*.{ts,vue}": ["eslint --fix"]
  }
}

配置生效原理 #

通过分文件配置解析器，既让.vue文件被vue-eslint-parser正确识别结构，又让脚本内的TypeScript语法（包括import type）被@typescript-eslint/parser解析，同时保证类型导入规则和ESLint检查逻辑正常运行，解决规则冲突和解析错误的两难问题。

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