装对插件比配路径更重要：必须安装nuxt devtools插件并启用taken over mode的volar，配置tsconfig.json的"types"和jsconfig.json的paths别名，调试需用pwa-node类型指定nuxi dev。

装对插件比配路径更重要

VSCode 本身不内置 Nuxt 支持，nuxi 和 @nuxt/devtools 是核心依赖，但 VSCode 要识别它们得靠插件。只装 Volar 不够——它只管 Vue，Nuxt 特有的 useAsyncData、definePageMeta、~/ 别名这些，得靠 Nuxt DevTools 插件激活语义理解。

• Nuxt DevTools 必装（官方出品），启用后右下角会出现 Nuxt 图标，点开能看运行时状态、服务端日志、组件层级
• Volar 要切换到 Taken Over Mode（不是 Strict Mode），否则 definePageMeta 类型推导会失效
• 别装 Vetur，和 Volar 冲突，会导致 .vue 文件里 script setup 的类型提示全崩
• 如果项目用 TypeScript，确保 tsconfig.json 中 "types" 包含 "nuxt"，否则 useRuntimeConfig 这类函数没提示

调试时断点不触发？检查 launch.json 的 type 和 runtimeExecutable

Nuxt 3 默认走 nuxi dev，不是 node 直接跑，VSCode 默认的 Node.js 调试器抓不到进程。必须用 pwa-node 类型，并显式指定 nuxi 入口。

• 在 .vscode/launch.json 里写：

  {
    "configurations": [{
      "type": "pwa-node",
      "request": "launch",
      "name": "Nuxt Dev",
      "runtimeExecutable": "npx",
      "runtimeArgs": ["nuxi", "dev"],
      "console": "integratedTerminal",
      "internalConsoleOptions": "neverOpen"
    }]
  }

• 别用 node 类型，哪怕你本地全局装了 nuxi——VSCode 在调试模式下不读全局 PATH，runtimeExecutable: "nuxi" 会直接报 command not found
• 服务端断点（比如 server/api/xxx.ts）要等浏览器发起请求才触发；客户端断点（pages/index.vue）在 hydration 完成后才生效，首次加载可能跳过

路径别名 ~/ 和 @/ 提示失效？看 jsconfig.json 或 tsconfig.json 的 baseUrl

VSCode 类型系统靠 jsconfig.json 或 tsconfig.json 的 compilerOptions.baseUrl 和 paths 解析别名。Nuxt 默认设了 ~/ 指向 src/，但 VSCode 不自动继承这个逻辑。

VSCode

避免常见的 VSCode 错误——设置冲突、调试器配置和扩展冲突。

下载

• 必须手动补上：

  {
    "compilerOptions": {
      "baseUrl": ".",
      "paths": {
        "~/*": ["src/*"],
        "@/*": ["src/*"]
      }
    }
  }

• 改完配置后，重启 TS Server（快捷键 Ctrl+Shift+P → Typescript: Restart TS server），否则旧缓存还在，~/components/Hello.vue 依然标红
• 如果项目根目录没有 jsconfig.json 或 tsconfig.json，VSCode 就当纯 JS 项目处理，连 definePageMeta 都不会识别为合法函数

热更新卡顿或 HMR 失效？关掉文件监听代理和 ESLint 自动修复

Nuxt 的 HMR 依赖文件系统事件，VSCode 的某些扩展会在保存时触发额外写操作，干扰 chokidar 监听链路。

• 禁用 ESLint 插件的 "eslint.autoFixOnSave"（已废弃，但旧配置可能残留），改用保存时手动运行 eslint --fix，否则格式化瞬间写入临时文件，HMR 误判为“文件被外部修改”而刷新整个页面
• 关闭 Files: Watcher Exclude 里的 **/node_modules/** ——看着合理，实则会让 VSCode 停止监听 node_modules/.nuxt 下生成的虚拟模块，导致 useAsyncData 返回值类型丢失
• Windows 用户如果用 WSL，务必在 VSCode 设置里关掉 Remote WSL > Experimental: Use New WSL Launcher，否则 nuxi dev 启动后文件变更事件延迟超 2 秒，HMR 彻底失灵

最麻烦的其实是 ~ 别名和 nuxi 调试器之间的耦合：一个配错，另一个就半残。调的时候别同时改两处，先让路径提示亮起来，再动 launch.json。