Nuxt3使用TypeScript类型时遭遇ESLint解析错误求助

问题核心 #

ESLint未正确配置Vue单文件组件（SFC）的解析规则，无法识别<script setup lang="ts">块中的TypeScript语法，导致出现Unexpected token :或Unexpected token ]类解析错误。

解决方案 #

1. 合并@antfu/eslint-config与Nuxt ESLint配置 #

直接使用Nuxt生成的配置会覆盖@antfu的规则，需将两者合并，确保同时支持Vue SFC解析和TypeScript语法识别。修改项目根目录下的eslint.config.mjs：

import antfu from '@antfu/eslint-config'
import withNuxt from './.nuxt/eslint.config.mjs'

export default withNuxt(antfu({
  vue: true,
  typescript: true,
  // 可根据项目需求调整规则，示例关闭冲突规则
  rules: {
    'vue/no-mutating-props': 'off'
  }
}))

2. 确认依赖完整性 #

确保安装了Vue和TypeScript的ESLint解析器依赖（@antfu/eslint-config通常已包含，但手动确认可避免缺失）：

npm install -D vue-eslint-parser @typescript-eslint/parser

3. 明确ESLint检查范围 #

在package.json的lint命令中指定需要检查的文件扩展名，确保Vue文件被正确扫描：

{
  "scripts": {
    "lint": "eslint . --ext .vue,.js,.ts,.mjs"
  }
}

4. 清除ESLint缓存并重启服务 #

旧缓存可能导致配置不生效，执行以下命令清除缓存并重启Nuxt开发服务：

npx eslint --clear-cache
npm run dev

验证 #

使用你提供的测试代码进行验证：

<script setup lang="ts">
const test: string = 'test'
</script>

<template>
  <div />
</template>

运行npm run lint，确认解析错误已消失。

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