VSCode怎么开发小程序_VSCode微信小程序开发环境配置与插件推荐-VSCode-PHP中文网

VSCode不能运行或调试微信小程序，仅作代码编辑；所有编译、预览、真机调试必须依赖微信开发者工具。project.config.json报错需删debugOptions/condition字段并确保miniprogramRoot为相对路径；TS需安装@types/wechat-miniprogram并配置types；WXML禁用Prettier格式化；断点生效需开启微信工具远程调试且生成sourceMap。

vscode怎么开发小程序_vscode微信小程序开发环境配置与插件推荐

VSCode 不能运行或调试微信小程序，它只负责写代码；所有编译、预览、真机调试必须依赖微信开发者工具。这是配置前必须接受的前提，否则后续所有“没反应”“断点不命中”“console 不输出”问题都会白调。

为什么 `project.config.json` 一打开就报错

VSCode 默认不解析这个文件，报错往往是因为它被当成了普通 JSON，而里面含了微信开发者工具专用字段（如 debugOptions、condition、绝对路径的 miniprogramRoot），这些在 VSCode 里属于非法属性。

删掉 project.config.json 中的 debugOptions 和 condition 字段——它们只对微信开发者工具生效，VSCode 会校验失败
确保 miniprogramRoot 是相对路径，比如 "./" 或 "./src/"，不要写成 "C:\Users\xxx\miniprogram"
如果项目用 TypeScript，还要确认 miniprogramRoot 指向的是编译后的 JS 目录（如 dist/），而不是源码目录（如 src/），否则微信工具加载不到实际运行的文件

`minapp` 插件装了但 `wx.request` 还是没提示

插件只是载体，真正提供类型补全的是 @types/wechat-miniprogram 或 miniprogram-api-typings 这类类型声明包。没装或没配对，minapp 就只剩语法高亮。

执行 npm install --save-dev @types/wechat-miniprogram（推荐）或 npm install --save-dev miniprogram-api-typings（更贴近基础库更新节奏）
在 tsconfig.json 的 compilerOptions.types 中显式加入 "wechat-miniprogram" 或 "miniprogram-api-typings"
别用 @types/wechat-miniprogram@latest 直接升级到 v3.x —— 它和微信基础库 2.30+ 不完全兼容，getOpenUserInfo 等新 API 会标红；稳妥做法是锁版本：npm install --save-dev @types/wechat-miniprogram@2.30.4

`.wxml` 文件里 `bindtap` 被 Prettier 格式化成 `bind:tap`

Prettier 默认按 HTML 规则处理 .wxml，但它不理解微信的事件绑定语法，强行格式化会破坏运行逻辑。

微信公众号发文助手

微信公众号产业研究发文助手，支持原文读取、分层摘要、产业链标的梳理、image2 海报与封面生成、正文排版、微信草稿保存、回读校验和发布前确认。

下载

在项目根目录加 .prettierrc，写入：{"overrides": [{"files": "*.wxml", "options": {"parser": "html"}}]} —— 这只是绕过解析错误，还不够
更彻底的做法：禁用 Prettier 对 .wxml 的接管，在 settings.json 加："[wxml]": {"editor.defaultFormatter": null}
如果仍想保留缩进/空格等基础格式化，可用 minapp 自带的格式化能力，它专为 WXML 设计，能识别 model:value、data-xxx 等自定义属性

调试时断点打了但根本不触发

这不是 VSCode 的问题，而是你没连上微信开发者工具的调试通道。VSCode 里打的断点，只有在微信工具开启远程调试并正确映射 source map 时才有效。

微信开发者工具 → 右上角「调试器」→「调试」→ 勾选「启用远程调试」（端口默认 9229）
确保构建过程生成了正确的 sourceMap：Webpack 项目设 devtool: 'source-map'，TS 项目在 tsconfig.json 开 "sourceMap": true
检查微信开发者工具的「项目设置」→「调试」→「增强编译」是否关闭——开启后会破坏 source map 映射，导致断点失效
console.log 输出永远只出现在微信开发者工具的「调试器 → Console」里，VSCode 的 Debug Console 不会显示小程序日志

最常被忽略的一点：微信开发者工具的服务端口（默认 56789）和远程调试端口（默认 9229）必须同时开启，且不能被系统防火墙或公司代理拦截；本地 mock 接口、自动化上传等后续动作都依赖这两个端口连通。