Eslint 9 在defineEmits 上出现 typescript 和 vue 错误

Question

升级我的astro博客的依赖项后，我偶然发现了最新的eslint版本和typescript + vue的一个奇怪问题。

我遵循了 eslint、tslint、eslint-plugin-vue 和 eslint-config-prettier 的官方文档，但是有些事情很奇怪，我不知道为什么。

Eslint 告诉我这个代码块有解析错误

Parsing error: Unexpected token

，但这应该没问题（请参阅官方 vue 文档）

<script setup lang="ts">
const emit = defineEmits<{
  (e: 'change', id: number): void
  (e: 'update', value: string): void
}>()
</script>

我为错误提供了一个最小的示例 https://github.com/Theiaz/eslint-defineemits-bug。看来 vue 的配置没有正确加载。我在这里缺少什么？

{
  "name": "typescript-eslint-vue",
  "version": "0.0.0",
  "private": true,
  "type": "module",
  "scripts": {
    "check": "vue-tsc --noEmit && tsc --noEmit ",
    "lint": "eslint --fix src"
  },
  "devDependencies": {
    "@eslint/js": "^9.13.0",
    "@types/eslint__js": "^8.42.3",
    "@typescript-eslint/parser": "^8.11.0",
    "eslint": "^9.13.0",
    "eslint-config-prettier": "^9.1.0",
    "eslint-plugin-vue": "^9.10.0",
    "prettier": "^3.3.3",
    "typescript": "^5.6.3",
    "typescript-eslint": "^8.11.0",
    "vue": "^3.5.12",
    "vue-tsc": "^2.1.6"
  },
  "dependencies": {
    "@vue/tsconfig": "^0.5.1",
    "@vueuse/core": "^11.1.0"
  }
}

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

export default tseslint.config(
  eslint.configs.recommended,
  ...tseslint.configs.recommended,
  ...pluginVue.configs["flat/recommended"],
  prettierConfig,
  {
    files: ["**/*.ts", "**/*.vue"],
    rules: {},
  }
);

Answer 1

@vue/eslint-config-typescript

可用于正确配置 ESlint 以与 TypeScript 和 Vue SFC 配合使用：

import pluginVue from "eslint-plugin-vue";
import vueTsEslintConfig from "@vue/eslint-config-typescript";

export default [
  ...pluginVue.configs["flat/essential"],
  ...vueTsEslintConfig(),
  // Add prettier or else
]

这样就无需直接使用

typescript-eslint

。