VSCode怎么安装微信小程序开发环境-VSCode-PHP中文网

vscode 不能运行、编译或调试微信小程序，仅作编辑器；所有执行必须依赖微信开发者工具。正确流程是：vscode 编辑保存 → 微信开发者工具监听文件变化 → 自动编译 → 模拟器或真机运行。

vscode怎么安装微信小程序开发环境

它只是编辑器，不能运行、编译或调试小程序。所谓“安装环境”，其实是配置 VSCode 让它配合微信开发者工具工作。真正干活的是微信开发者工具——你必须先装它，否则 VSCode 再多插件也没用。

常见错误现象：npm run dev 报错找不到 app.json、点击 VSCode 的「运行」按钮没反应、console.log 输出消失不见——这些都不是 VSCode 配置问题，而是误以为它能替代微信开发者工具。

默认情况下 VSCode 把 .wxml 当纯 XML，没有属性提示、标签闭合校验、<import></import> 跳转；.wxs 按 JS 解析但不识别微信限制（比如禁用 setTimeout）。

关键操作不是装一堆名字带“小程序”的插件，而是两件事：装 minapp 插件 + 手动语言关联。

公众号运营：文章发布至草稿、样式封面、评论与用户管理、数据统计等。用户要求将 Markdown 发送到公众号草稿、查看阅读量统计或类似后台操作时，使用本技能。

下载

在扩展市场搜索安装 minapp（作者 qiu8310），它是目前唯一持续维护 WXML 语言服务的扩展
按 Ctrl + Shift + P → 输入 Change Language Mode → 回车 → 选 WXML（如果没出现，重启 VSCode 或检查是否被其他 WXML 插件禁用）

在项目根目录的 .vscode/settings.json 中写入：

{"files.associations": {"*.wxml": "wxml", "*.wxss": "css", "*.wxs": "javascript"}}

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({ 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 必须在同一个目录下，且微信工具要能读到它们