如何配置VSCode插件高效开发微信小程序？

本文共计1081个文字，预计阅读时间需要5分钟。

基本原因不是插件未安装，而是VSCode默认未将+.wxml和+.wxss当作代码文件处理——默认视为纯文本，自然没有高亮、闭合检验、属性提示等。

实操建议：

• 打开 settings.json（Ctrl+, → 点右上角“在 settings.json 中编辑”），加这两行：

  "*.wxml": "html",<br>"*.wxss": "css"

• 装 minapp 插件（作者 qiu8310），它是目前唯一持续维护、支持标签 + API 双补全的扩展
• 确保项目根目录有 project.config.json，否则 minapp 会降级为仅语法高亮
• 别信“自动识别”宣传，这步手动关联语言模式跳过，后面所有智能提示都打折

TS 类型提示失效，Page 参数标红或 wx. 没补全

不是插件坏了，是缺少微信官方类型定义。社区版 @types/wechat-miniprogram 版本滞后严重，和基础库 3.x+ 不兼容，常见 getOpenUserInfo 报错就是它导致的。

实操建议：

• 装微信官方维护的 miniprogram-api-typings：npm install --save-dev miniprogram-api-typings
• 项目根目录建 types/ 文件夹，把 miniprogram-api-typings 的 index.d.ts 放进去（或直接引用 node_modules）
• tsconfig.json 里明确写：

  "compilerOptions": {<br> "typeRoots": ["./types", "./node_modules/@types"]<br>}

• Page 的 onLoad 参数要类型安全？显式加泛型：Page(...)，不然 options.id 就是 any

保存后微信开发者工具不自动刷新，或断点不命中

VSCode 不监听未保存的文件，微信开发者工具也不读取内存中的变更——它只读磁盘文件。而断点不命中，90% 是 source map 没对上，不是调试器没连上。

实操建议：

• 务必手动 Ctrl+S（Win）或 Cmd+S（Mac）保存，别依赖 autosave 延迟——微信工具不会等你那 1 秒
• 如果用了 TypeScript 或构建工具（如 webpack），确保构建命令开了 sourceMap: true，且输出路径（如 miniprogram/）和微信开发者工具设置的 miniprogramRoot 完全一致
• 不要在 miniprogram/ 目录里混写 .ts 和 .js，微信工具可能加载旧的 .js 而忽略新编译结果
• 调试时看日志，必须打开微信开发者工具右上角「调试器」→「Console」，VSCode 的 Debug Console 不显示小程序日志

Prettier 格式化把 bind:tap 弄成 bindtap 或删掉 model:value

Prettier 默认按 HTML 规范处理属性，但 wxml 里的 bind:xxx、data-xxx、model:value 都是非标准写法，一格式就错。

实操建议：

• 在 settings.json 关掉 Prettier 对 wxml 的接管：

  "[wxml]": {<br> "editor.defaultFormatter": null<br>}

• 或者用 .prettierrc 单独禁用：

  {<br> "overrides": [<br> { "files": "*.wxml", "options": { "htmlWhitespaceSensitivity": "ignore" } }<br> ]<br>}

• 别用 editor.formatOnSave 全局开，改成按语言粒度控制，比如只对 javascript 和 typescript 开启
• WXML 格式化交给 minapp 自带逻辑，它认微信语法，不会乱动自定义属性

真正卡住人的从来不是“怎么配”，而是搞不清 VSCode 和微信开发者工具的分工边界。比如以为装了某个插件就能“一键启动小程序”，结果终端报 command not found；又或者在 VSCode 里打完断点，却盯着自己的 Debug Console 等日志——这些都不是配置问题，是职责混淆。把 VSCode 当编辑器用，把微信开发者工具当运行时用，边界划清了，剩下的就是填几个 JSON 字段的事。