如何使用VSCode开发微信小程序-VSCode-PHP中文网

vscode需安装minapp扩展并配置文件关联、删除project.config.json冗余字段、用minapp启动调试、安装miniprogram-api-typings类型包、关闭开发者工具es6转译与增强编译。

如何使用vscode开发微信小程序

微信小程序项目本质是静态资源+配置驱动，VSCode 默认不带小程序语义支持，所以打开就报 Cannot find module 'miniprogram-api-typings' 或路径红波浪线。这不是代码错，是环境没对齐。

实操建议：

必须安装官方扩展 Minapp（作者：qiu8310），它提供语法高亮、WXML/WXSS 标签补全、app.json schema 校验
项目根目录下手动创建 .vscode/settings.json，写入：
```
{ "files.associations": { "*.wxml": "html", "*.wxss": "css" } }
```
，否则 WXML 会被当成纯文本，连基础标签闭合都不提示
别依赖「微信开发者工具」自动导出的 project.config.json 直接开——它含绝对路径和本地调试端口，VSCode 里会触发校验失败；建议删掉 project.config.json 中的 debugOptions 和 condition 字段再使用

VSCode 本身不运行小程序逻辑，所有 JS 都跑在微信开发者工具的模拟器或真机里。你点「开始调试」，实际只是把 VSCode 当作编辑器，没连上调试通道。

实操建议：

用微信开发者工具开启「调试器」→「调试」→ 勾选「启用远程调试」，它会启动一个 WebSocket 服务（默认端口 9229）
VSCode 中新建 .vscode/launch.json，配置 type 为 node，但 target 是 localhost:9229 —— 这不对。正确做法是：用 Minapp 扩展自带的 Launch MiniProgram 启动配置，它会自动唤起开发者工具并注入调试协议
console.log 要看输出，必须打开微信开发者工具右上角「调试器」→「Console」面板，VSCode 的 Debug Console 不显示小程序日志

微信小程序原生 TS 支持靠 miniprogram-api-typings 包，但它只覆盖 API，不描述页面生命周期参数结构。你写 Page({ onLoad(options) { ... } })，options 会是 any。

VSCode

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

下载

实操建议：

手动安装类型包：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 报错

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。