如何为Vue3+TypeScript项目配置ESLint 9扁平配置？

你的核心问题是未正确配置Vue插件的解析器链，导致它无法处理.vue文件中的TypeScript代码块。下面是修正后的完整eslint.config.js配置，同时优化了配置的合理性：

import eslint from "@eslint/js";
import tseslint from "typescript-eslint";
import pluginVue from "eslint-plugin-vue";
import eslintConfigPrettier from "eslint-config-prettier";

export default tseslint.config(
  // 基础忽略规则
  {
    ignores: ["dist/**", "node_modules/**", "**/cypress/**", "html/", "coverage/"],
  },
  // ESLint 官方推荐规则
  eslint.configs.recommended,
  // TypeScript ESLint 类型检查推荐规则
  ...tseslint.configs.recommendedTypeChecked,
  {
    languageOptions: {
      parserOptions: {
        project: true,
        tsconfigRootDir: import.meta.dirname,
      },
    },
  },
  // Vue3 强推荐规则（已包含essential和recommended规则）
  ...pluginVue.configs["flat/strongly-recommended"],
  // 针对.vue文件的TS解析配置
  {
    files: ["**/*.vue"],
    languageOptions: {
      parser: pluginVue.parser,
      parserOptions: {
        parser: tseslint.parser,
        ecmaVersion: "latest",
        sourceType: "module",
        project: true,
        tsconfigRootDir: import.meta.dirname,
      },
    },
  },
  // 自定义Vue规则
  {
    rules: {
      "vue/match-component-import-name": "warn",
      "vue/match-component-file-name": [
        "error",
        {
          extensions: ["vue"],
          shouldMatchCase: true,
        },
      ],
      "vue/component-definition-name-casing": ["error", "PascalCase"],
      "vue/block-tag-newline": [
        "warn",
        {
          singleline: "always",
          multiline: "always",
          maxEmptyLines: 0,
        },
      ],
      "vue/html-self-closing": [
        "error",
        {
          html: {
            void: "always",
            normal: "never",
            component: "always",
          },
          svg: "always",
          math: "always",
        },
      ],
      "vue/require-default-prop": "off",
      // 关闭与Prettier冲突的TS缩进规则
      "@typescript-eslint/indent": "off",
    },
  },
  // 禁用所有与Prettier冲突的ESLint规则
  eslintConfigPrettier
);

关键调整说明：

• 针对.vue文件单独配置解析器链：用pluginVue.parser处理Vue单文件组件结构，内部指定tseslint.parser解析<script lang="ts">或<script setup lang="ts">中的TS代码
• 使用tseslint.configs.recommendedTypeChecked替代手动配置插件和解析器，覆盖完整的TS类型检查规则，配置更简洁
• 移除重复的Vue基础配置，flat/strongly-recommended已包含essential和recommended的所有规则
• 添加tsconfigRootDir确保ESLint能正确定位项目根目录的tsconfig.json
• 额外关闭@typescript-eslint/indent规则，避免与Prettier的格式化逻辑冲突

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