VSCode如何搭建微信小程序开发环境-VSCode-PHP中文网

VSCode不能运行、编译或调试微信小程序，仅作编辑器；所有执行必须依赖微信开发者工具。核心是确保文件保存、project.config.json路径正确、TS需编译为JS、安装@types/wechat-miniprogram提供类型支持，并用minapp插件实现WXML/WXSS语法高亮与补全。

vscode如何搭建微信小程序开发环境

VSCode 不能运行、编译或调试微信小程序，它只是编辑器；所有实际执行必须靠微信开发者工具。配置的核心目标是：写得准、跳得进、看得清、改了就能在微信工具里立刻生效。

为什么改了 .ts/.wxml 文件，微信开发者工具没反应

微信原生框架只加载 .js/.wxml/.wxss，不识别源码。TS、JSX、Sass 等必须先编译成目标格式，且输出路径要和微信工具读取的路径一致。

确保 tsconfig.json 中 compilerOptions.outDir 指向小程序源码目录（如 "miniprogram"），且 include 包含 "miniprogram/**/*.ts"
用 npx tsc -w 启动监听编译，别依赖手动 Ctrl+S 后再切过去点「重新编译」
避免在 miniprogram/ 目录里混写 .ts 和 .js——微信工具可能加载旧的 .js，导致你改了 TS 却看不到效果
检查 project.config.json 的 miniprogramRoot 字段是否为 "./miniprogram"（或对应路径），否则微信工具根本不会扫描该目录

如何让 Page、Component、wx.request 有类型提示和跳转

VSCode 默认不认识这些 API，补全失效、hover 无参数说明、Ctrl+Click 跳不到定义，本质是缺类型声明。

运行 npm install --save-dev @types/wechat-miniprogram（注意：不是 miniprogram-api-typings，后者已滞后，对基础库 3.x+ 新 API 如 getOpenUserInfo 报错）
确认 tsconfig.json 的 types 字段包含 "wechat-miniprogram"，例如："types": ["node", "wechat-miniprogram"]
给 Page 加泛型，比如 Page({ onLoad(options) { console.log(options.id); } })，否则 options 是 any
如果用了自定义构建（如 webpack），确保 resolve.alias 或 paths 配置没破坏类型解析路径

WXML/WXSS/WXS 文件怎么获得语法支持和自动补全

默认情况下 VSCode 把 .wxml 当纯 XML，没有属性提示、标签闭合校验，.wxs 甚至被当成普通 JS，无法禁用不支持的全局变量。

微信公众号发文助手

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

下载

装官方扩展 minapp（作者 qiu8310），它是目前唯一稳定维护 WXML 语言服务的扩展
在 .vscode/settings.json 中加关联："files.associations": { "*.wxml": "wxml", "*.wxss": "css", "*.wxs": "javascript" }
对 .wxs，配合 ESLint 规则禁用 console、setTimeout 等不支持的 API，规则示例："no-restricted-globals": ["error", "console", "setTimeout", "setInterval"]
别装名字带“微信小程序开发助手”“WeChat Mini Program”的插件——大多停更，和 minapp 冲突，反而导致 WXML 标签补全失效

断点不命中、console.log 看不到输出，是不是 launch.json 配错了

不是。VSCode 的 Node.js 调试器完全不适用于小程序逻辑层——代码跑在微信客户端沙箱里，不是 Node 进程。所谓“调试”，只能通过微信开发者工具完成。

VSCode 里打的断点永远不会触发，除非你配置了 source map 且微信工具开启了调试协议，并由 minapp 扩展桥接（但实际成功率低、体验差）
正确做法：在微信开发者工具中打开右上角「调试器」→「Console」看日志，「Sources」里打断点；VSCode 只负责同步编辑
确保微信开发者工具设置中启用了「服务端口」（默认 56789），这是自动化构建（如 miniprogram-ci）必需的，但和本地调试无关
如果用了 TypeScript，检查构建是否生成了正确的 sourceMap（如 Webpack 的 devtool: 'source-map'），否则即使微信工具里能打断点，也映射不到 VSCode 的原始 TS 行号

最容易被忽略的是：所有改动必须保存到磁盘，微信开发者工具才读得到；以及 project.config.json 里的路径字段一旦写错，整个项目根就失效——它不报错，只是静默跳过源码目录。