微信小程序项目不能直接用VS Code“打开文件夹”运行，因其仅是编辑器，缺乏WXML预览、WXSS编译、真机调试等功能；需配合微信开发者工具协同开发——VS Code负责编码，后者负责构建、调试与运行。
微信小程序项目不能直接用 VS Code “打开文件夹”就运行
VS Code 是编辑器，不是小程序开发工具，它本身不提供 WXML 实时预览、WXSS 编译、真机调试或云开发环境。直接用 VS Code 打开一个小程序目录，你只能写代码，但看不到效果、没法断点、也调不通 wx.request 或 getStorageSync。
真正能“打开并开发”的方式，是把 VS Code 当作代码编辑器，配合微信开发者工具完成构建和调试。
- 微信开发者工具负责：编译、模拟器渲染、调试器（console / sources / network）、真机同步、云开发控制台
- VS Code 负责：高效编码（支持 Emmet、TS 智能提示、Git 集成、插件扩展）
- 两者通过同一份源码目录协同——你用 VS Code 写，用微信开发者工具看和调
必须先用微信开发者工具初始化或导入项目
如果你手头只有小程序源码（比如从 Git 克隆的 miniprogram/ 目录），VS Code 无法自动识别这是小程序项目。必须先让微信开发者工具“认领”它：
- 启动微信开发者工具 → 点击「+ 新建项目」→ 填写 AppID（测试可选「测试号」）→ 选择项目目录（即你准备用 VS Code 编辑的那个文件夹）→ 勾选「在当前目录创建 quickstart 项目」（仅首次）或「不使用云服务」→ 完成
- 如果已有项目，选「导入项目」→ 指向含
project.config.json的目录 → 确保该文件里miniprogramRoot字段正确（例如"miniprogramRoot": "miniprogram/"） - 导入成功后，微信开发者工具会生成
.projectignore和project.private.config.json，这些文件建议加入 VS Code 的.gitignore，但不要删
VS Code 需要装几个关键插件才好用
原生 VS Code 对小程序支持极弱，不装插件连 WXML 语法高亮都没有，WXSS 会误报错误，app.json 里的页面路径也无提示。
- 必装：
minapp（作者：qiu8310）—— 提供 WXML/WXSS/JS 支持、组件属性提示、app.json页面跳转、require路径校验 - 推荐：
Auto Close Tag+Auto Rename Tag—— 写 WXML 时少出错 - 可选：
ES7+ React/Redux/React-Native snippets—— 快速输入cclass生成 Page 构造器模板 - 注意：
minapp插件不处理 TypeScript，如用 TS 开发，还需配miniprogram-api-typings和tsconfig.json中的types字段
常见错误：改了代码但微信开发者工具不刷新
这不是 VS Code 的问题，而是微信开发者工具的监听机制有盲区。典型现象：你在 VS Code 里保存了 pages/index/index.js，但模拟器没反应，控制台也没 log。
- 检查微信开发者工具右上角「编译」按钮是否为灰色——灰色代表已开启「自动编译」；如果是蓝色「编译」，说明自动编译被关了，手动点一下
- 确认文件保存时没有触发编码转换（比如从 GBK 保存为 UTF-8-BOM），BOM 头会导致
JSON.parse失败，整个页面白屏且无报错 - 修改
project.config.json后，微信开发者工具不会自动重载配置，需重启工具或点击右上角「刷新」图标 - VS Code 的「保存时格式化」如果作用于
WXML，可能把<view wx:if="{{a}}"格式化成<view wx:if="{{ a }}"，部分旧版基础库会解析失败，建议关闭 WXML 文件的 format on save
小程序开发里，VS Code 和微信开发者工具是分工明确的搭档，不是替代关系。最容易被忽略的一点：所有涉及生命周期、API 调用、组件通信的逻辑，都得靠微信开发者工具的调试器去看执行流和变量值——光盯着 VS Code 的代码，永远不知道 onLoad 为什么没进。
