VS Code中Nuxt 3模板未定义变量无错误高亮问题求助

我在使用Nuxt 3开发时，遇到一个问题：在VS Code中使用不存在的变量时，编辑器完全没有错误提示。我已经安装了Vue相关扩展、ESLint扩展，并且下载了@nuxt/eslint，但问题依然存在。以下是我的相关配置文件：

package.json #

{
  "name": "nuxt-app",
  "private": true,
  "type": "module",
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "dependencies": {
    "@nuxt/eslint": "^0.3.10",
    "@pinia/nuxt": "^0.5.1",
    "bootstrap": "^4.6.0",
    "nuxt": "^3.11.2",
    "pinia": "^2.1.7",
    "vue": "^3.4.21",
    "vue-router": "^4.3.0"
  },
  "devDependencies": {
    "@nuxtjs/i18n": "^8.3.0",
    "sass": "^1.75.0"
  }
}

eslint.config.mjs #

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

export default withNuxt(
  // Your custom configs here
)

tsconfig.json #

{
  // https://nuxt.com/docs/guide/concepts/typescript
  "extends": "./.nuxt/tsconfig.json"
}

具体解决步骤 #

• 启用TypeScript严格检查
  在nuxt.config.ts中明确开启TypeScript的严格模式和类型检查，确保Nuxt生成的类型配置能被VS Code识别：

  export default defineNuxtConfig({
    typescript: {
      strict: true,
      typeCheck: true
    }
  })
  

  执行nuxt prepare重新生成配置，让修改生效。

• 配置ESLint未定义变量检查规则
  修改eslint.config.mjs，明确启用未定义变量的检查规则：

  // @ts-check
  import withNuxt from './.nuxt/eslint.config.mjs'
  
  export default withNuxt({
    rules: {
      'no-undef': 'error',
      '@typescript-eslint/no-undef': 'error'
    }
  })
  

• 调整VS Code扩展设置

  • 确保安装并启用最新版的Volar扩展，开启Volar > Take Over Mode（该模式会让Volar接管Vue/TS文件的语法检查，避免和原生TypeScript扩展冲突）。
  • 检查ESLint扩展配置：确认ESLint > Validate列表包含.vue、.js、.ts等文件类型，且ESLint > Enable处于开启状态。

• 重启服务与编辑器
  停止Nuxt开发服务器，执行nuxt prepare后重启VS Code，确保所有新配置加载生效。

• 规范文件语法
  确保Vue文件的script部分使用TypeScript语法，比如：

  <script setup lang="ts">
  // 未定义的变量会被TypeScript和ESLint提示
  const test = undefinedVariable
  </script>
  

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