VSCode 不能运行、编译或调试微信小程序，仅作编辑器；所有执行必须依赖微信开发者工具。正确流程是：VSCode 编辑保存 → 微信开发者工具监听文件变化 → 自动编译 → 模拟器或真机运行。
VSCode 本身不安装微信小程序开发环境
它只是编辑器，不能运行、编译或调试小程序。所谓“安装环境”，其实是配置 VSCode 让它配合微信开发者工具工作。真正干活的是微信开发者工具——你必须先装它，否则 VSCode 再多插件也没用。
常见错误现象：npm run dev 报错找不到 app.json、点击 VSCode 的「运行」按钮没反应、console.log 输出消失不见——这些都不是 VSCode 配置问题，而是误以为它能替代微信开发者工具。
- 去微信官网下载并安装最新稳定版「微信开发者工具」（Beta 版对
miniprogram-ci兼容性差） - 安装后打开，登录、新建项目（哪怕空项目），确保能正常预览
- VSCode 中打开的文件夹，必须是微信开发者工具里「添加项目」所指向的同一目录
让 VSCode 正确识别 .wxml / .wxss / .wxs 文件
默认情况下 VSCode 把 .wxml 当纯 XML，没有属性提示、标签闭合校验、<import> 跳转；.wxs 按 JS 解析但不识别微信限制（比如禁用 setTimeout）。
关键操作不是装一堆名字带“小程序”的插件，而是两件事：装 minapp 插件 + 手动语言关联。
- 在扩展市场搜索安装
minapp（作者qiu8310），它是目前唯一持续维护 WXML 语言服务的扩展 - 按
Ctrl + Shift + P→ 输入Change Language Mode→ 回车 → 选WXML（如果没出现，重启 VSCode 或检查是否被其他 WXML 插件禁用） - 在项目根目录的
.vscode/settings.json中写入：{"files.associations": {"*.wxml": "wxml", "*.wxss": "css", "*.wxs": "javascript"}} - 加
.prettierignore文件，内容为：**/*.wxml\n**/*.wxss
，避免 Prettier 错误格式化
TypeScript 类型提示失效怎么办
Page 参数标红、wx. 没补全、onLoad(options) 里 options.id 是 any——本质是缺类型声明，不是插件没装对。
- 运行
npm install --save-dev @types/wechat-miniprogram（别用已停更的miniprogram-api-typings） - 确认
tsconfig.json中有："types": ["wechat-miniprogram"]
-
Page必须显式加泛型才能推导options类型，例如：Page<{ id: string }>({ onLoad(options) { console.log(options.id); } }) - 如果项目用了
miniprogramRoot: "./src"，确保tsconfig.json的include包含"src/**/*.ts"，且outDir指向实际输出目录（如miniprogram/）
断点不命中、保存后不刷新的根源在哪
你在 VSCode 里打的断点不会让 VSCode 停住，它依赖微信开发者工具把 source map 映射传回来；而「改了代码没反应」90% 是因为没保存，不是热更新没开。
- 务必手动
Ctrl+S（Win）/Cmd+S（Mac）——微信开发者工具只读磁盘文件，不监听未保存变更 - 断点不命中？先检查微信开发者工具是否开启「服务端口」：设置 → 安全设置 → ✅ 启用 HTTP 服务（默认端口
56789） - source map 对不上？重点看构建配置：Webpack/Vite/tsc 的
devtool或sourceMap是否开启，输出路径（如miniprogram/）是否与微信开发者工具项目根目录一致 - 如果用了 TypeScript，
tsc --watch或vite build --watch生成的.js和.js.map必须在同一个目录下，且微信工具要能读到它们
最常被忽略的点：project.config.json 里的 miniprogramRoot 和 tsconfig.json 的 outDir、构建脚本的输出路径，三者必须严格一致。差一个字符，source map 就断掉。
