VSCode 中 Next.js 项目 TypeScript 类型识别异常、自动补全失效或调试失败，需依次配置核心扩展、工作区 settings.json、TypeScript 类型检查、launch.json 调试及 ESLint+Prettier 自动修复链。
在使用 VSCode 进行 Next.js 项目开发时，若编辑器未正确识别 TypeScript 类型、缺少自动补全或调试无法启动，则可能是开发环境配置不完整或插件协同异常。以下是针对该问题的多种配置优化方案：
本文运行环境：MacBook Pro，macOS Sequoia。
一、安装核心扩展与禁用冲突插件
VSCode 的智能提示与调试能力高度依赖扩展生态，但部分扩展会因语言服务器竞争导致类型解析失败或热重载延迟。
1、打开 VSCode 扩展市场（快捷键 Cmd+Shift+X）。
2、搜索并安装 ESLint、Prettier、TypeScript Hero 和 Next.js Tools 四个扩展。
3、在已安装扩展列表中，禁用 Auto Import 与 JavaScript (ES6) code snippets，避免其与 TypeScript 内置自动导入逻辑冲突。
二、配置工作区专属 settings.json
全局设置易引发多项目兼容性问题，工作区级配置可确保 Next.js 特有规则（如 pages/app 目录识别、服务端组件语法高亮）精准生效。
1、在项目根目录创建 .vscode 文件夹（若不存在）。
2、在该文件夹内新建 settings.json 文件。
3、写入以下内容：
4、将 "typescript.preferences.includePackageJsonAutoImports": "auto" 设为 true，启用包入口自动推导。
5、添加 "nextjs.experimental.appDirectory": true，激活 App Router 专用路径解析。
三、启用 TypeScript 类型检查插件
Next.js 默认不强制执行 TypeScript 类型检查，需通过插件在编辑器内实时触发 tsc --noEmit 验证，避免运行时才发现类型错误。
1、在终端执行 npm install --save-dev typescript@latest @types/node @types/react @types/react-dom。
2、在项目根目录运行 npx tsc --init 生成 tsconfig.json。
3、在 tsconfig.json 中确认 "skipLibCheck": true 与 "jsx": "preserve" 已启用。
4、在 VSCode 设置中启用 "typescript.preferences.useAliasesForBundling": true，提升模块路径别名识别准确率。
四、配置 launch.json 实现断点调试
Next.js 开发服务器基于 Node.js 启动，但默认 dev 模式不暴露调试端口，需通过自定义脚本注入 --inspect 标志并配置 VSCode 调试器连接。
1、在 .vscode 文件夹中新建 launch.json 文件。
2、填入配置对象，其中 "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/next" 指向本地 next CLI。
3、在 "args" 数组中加入 "dev" 与 "--inspect" 两个参数。
4、设置 "port": 9229 并启用 "console": "integratedTerminal" 以便日志同步显示。
五、启用 ESLint + Prettier 自动修复链
代码风格统一需在保存时完成格式化与规则修正，但 Prettier 与 ESLint 规则存在重叠，必须通过 eslint-config-prettier 关闭 ESLint 中与格式化相关的规则。
1、执行 npm install --save-dev eslint-config-prettier。
2、在 .eslintrc.json 的 extends 数组末尾添加 "prettier"。
3、在 settings.json 中设置 "editor.codeActionsOnSave": {"source.fixAll.eslint": true}。
4、确认 "editor.formatOnSave": false，防止 Prettier 与 ESLint 二次覆盖。
