VSCode需安装Minapp扩展并配置文件关联、删除project.config.json冗余字段、用Minapp启动调试、安装miniprogram-api-typings类型包、关闭开发者工具ES6转译与增强编译。
VSCode 无法识别 app.json 或 project.config.json 报错
微信小程序项目本质是静态资源+配置驱动，VSCode 默认不带小程序语义支持，所以打开就报 Cannot find module 'miniprogram-api-typings' 或路径红波浪线。这不是代码错，是环境没对齐。
实操建议：
- 必须安装官方扩展
Minapp（作者：qiu8310），它提供语法高亮、WXML/WXSS标签补全、app.jsonschema 校验 - 项目根目录下手动创建
.vscode/settings.json，写入：{ "files.associations": { "*.wxml": "html", "*.wxss": "css" } }，否则 WXML 会被当成纯文本，连基础标签闭合都不提示 - 别依赖「微信开发者工具」自动导出的
project.config.json直接开——它含绝对路径和本地调试端口，VSCode 里会触发校验失败；建议删掉project.config.json中的debugOptions和condition字段再使用
调试时断点不生效，console.log 输出看不到
VSCode 本身不运行小程序逻辑，所有 JS 都跑在微信开发者工具的模拟器或真机里。你点「开始调试」，实际只是把 VSCode 当作编辑器，没连上调试通道。
实操建议：
- 用微信开发者工具开启「调试器」→「调试」→ 勾选「启用远程调试」，它会启动一个 WebSocket 服务（默认端口
9229） - VSCode 中新建
.vscode/launch.json，配置 type 为node，但 target 是localhost:9229—— 这不对。正确做法是：用Minapp扩展自带的Launch MiniProgram启动配置，它会自动唤起开发者工具并注入调试协议 -
console.log要看输出，必须打开微信开发者工具右上角「调试器」→「Console」面板，VSCode 的 Debug Console 不显示小程序日志
TS 支持弱，Page、Component 类型推导不准
微信小程序原生 TS 支持靠 miniprogram-api-typings 包，但它只覆盖 API，不描述页面生命周期参数结构。你写 Page({ onLoad(options) { ... } })，options 会是 any。
实操建议：
- 手动安装类型包：
npm install --save-dev miniprogram-api-typings，并在tsconfig.json的types字段加入"miniprogram-api-typings" - 给
Page加泛型：用Page显式声明onLoad的options结构，否则 TS 不会校验options.id - 别用
@types/wechat-miniprogram——它是社区维护，版本滞后严重，常和基础库 3.x 不兼容，导致getOpenUserInfo等新 API 报错
保存后不自动编译，改了 WXML 得切回微信开发者工具点「重新编译」
VSCode 没有监听文件变化并触发小程序构建的能力。所谓「自动编译」其实是微信开发者工具自己的文件监听行为，VSCode 只是编辑器，不参与构建流程。
实操建议：
- 关闭微信开发者工具的「自动编译」开关，改用「自定义编译模式」+ 快捷键
Ctrl + B（Windows）手动触发，避免编辑时频繁刷新干扰调试 - 如需保存即编译，可在 VSCode 安装
Auto Run Command扩展，配置 on-save 触发 shell 命令：osascript -e 'tell app "微信开发者工具" to activate'（macOS），再配合 AppleScript 模拟按键，但稳定性差，容易卡死 - 真正可靠的方案是：用
miniprogram-ci写脚本做 watch + 构建，但仅适合 CI 场景，本地开发没必要加这层复杂度
最易被忽略的是：微信开发者工具的「项目设置」里「ES6 转 ES5」和「增强编译」开关，会影响 VSCode 里看到的源码映射关系——关掉它们，调试时才能准确跳转到你写的 TS 源文件，而不是编译后的 JS。
