WeChat Mini Program

一个面向原生微信小程序项目的 VS Code 扩展，重点补齐 VS Code 在 WXML / WXSS / WXS / 小程序 JS/TS/JSON 场景下常见但缺失的编辑器能力。

它更适合这类需求：

• 想在 VS Code 里获得更完整的微信小程序原生开发体验
• 需要 WXML / WXSS / WXS 的语法高亮、补全、诊断、格式化
• 需要 wx.* API、Page / Component / App / Behavior 的常用代码模板
• 希望在资源管理器里快速新建或删除小程序页面/组件

功能总览

核心能力

• WXML / WXSS / WXS 语言注册与语法高亮
• 微信小程序标签、属性、事件、指令与 wx.* API 补全
• 常用标签、指令、事件、API 的 hover 说明
• 常见结构问题的诊断提示与红色波浪线
• WXML / WXSS / WXS / 小程序 JSON 基础格式化
• 常用模板代码片段与整段脚手架片段
• 资源管理器右键新建 / 删除页面与组件

适用文件

• .wxml
• .wxss
• .wxs
• 小程序项目中的 .js
• 小程序项目中的 .ts
• 小程序项目中的 .json（如 app.json、页面同名配置、project.config.json）

详细功能说明

1. WXML

• 标签、指令、事件、插值表达式高亮
• 标签补全、属性补全、事件补全
• 上下文感知补全：会结合当前标签推荐更常用的属性和事件
• 快捷模板补全：如 vic、vicc、tec、tecc、navc
• 结构诊断：
  • 标签未闭合
  • 闭合顺序错误
  • 重复属性
  • 条件指令混用
  • wx:for 缺少 wx:key
  • 原生组件非法属性 / 非法事件拼写
• hover 说明：标签、属性、事件、推荐模板、典型场景
• WXML 格式化：更接近 Prettier 风格的多属性换行与结构整理

2. WXSS

• 基础 CSS 风格高亮（以 WXSS 为入口）
• 常用样式片段
• 常见错误诊断：
  • 花括号不匹配
  • 疑似缺少冒号 :
  • 属性值为空
• 文档格式化

3. WXS

• 复用 JavaScript 风格高亮
• 常用模块 / 函数片段
• 括号配对检查与语法错误提示
• 文档格式化

4. JS / TS / JSON

• wx.* API 补全与常用模板片段
• Page / Component / App / Behavior 整段模板补全
• 常用结构补全：
  • onLoad
  • lifetimes
  • pageLifetimes
  • observers
  • relations
  • externalClasses
• 常用实例方法补全：
  • this.setData
  • this.triggerEvent
  • this.selectComponent
• TS 事件类型模板：
  • WechatMiniprogram.TouchEvent
  • WechatMiniprogram.CustomEvent<{ value: string }>
• WXML <-> JS/TS 联动：
  • WXML 里的事件名会联动提示逻辑方法名
  • JS/TS 中可根据同名 WXML 事件绑定生成方法骨架
• JSON 结构校验：
  • app.json
  • 页面 / 组件同名 .json
  • usingComponents / window / tabBar 等字段结构检查

命令

插件当前提供以下命令：

• WeChat Mini Program: 格式化当前文件
• WeChat Mini Program: 一键写入推荐格式化设置
• WeChat Mini Program: 重新校验工作区
• WeChat Mini Program: 新建 Page
• WeChat Mini Program: 新建 Component
• WeChat Mini Program: 删除 Page

新建 / 删除命令说明

新建 Page

• 支持从资源管理器右键目录触发
• 默认基于当前右键目录继续输入相对路径
• 例如：
  • 在项目根目录右键，输入 pages/profile
  • 在 components 目录右键，输入 admitInfo
• 默认生成：
  • .wxml
  • .scss（可配置切回 .wxss）
  • .json
  • .js 或 .ts（自动推断 / 可配置）
• Page 的默认 json 模板为：

{
  "usingComponents": {},
  "navigationStyle": "custom"
}

新建 Component

• 同样支持资源管理器右键目录触发
• 默认基于当前目录输入相对路径创建组件
• 默认生成：
  • .wxml
  • .scss（可配置切回 .wxss）
  • .json
  • .js 或 .ts
• Component 的默认 json 模板为：

{
  "usingComponents": {}
}

删除 Page

• 只有一个删除命令入口：WeChat Mini Program: 删除 Page
• 实际会根据当前右键目录自动识别删除的是页面还是组件
• 如果右键的目录本身就是页面 / 组件目录，会直接进入确认
• 如果右键的是父目录，则会列出该目录下可删除的页面 / 组件候选项

配置项

插件当前支持以下配置：

诊断与格式化

• wechatMiniProgramAssistant.enableDiagnostics

  • 类型：boolean
  • 默认：true
  • 说明：是否启用语法诊断与红色波浪线提示

• wechatMiniProgramAssistant.enableFormatting

  • 类型：boolean
  • 默认：true
  • 说明：是否启用 WXML / WXSS / WXS / 小程序 JSON 格式化

• wechatMiniProgramAssistant.onlyEnableInMiniProgramProject

  • 类型：boolean
  • 默认：true
  • 说明：仅在检测到微信小程序项目根目录时，对 JS/TS/JSON/WXML/WXSS/WXS 启用提示、诊断与补全

WXML 格式化相关

• wechatMiniProgramAssistant.wxmlQuoteStyle

  • 可选：double / single
  • 默认：double
  • 说明：WXML 属性引号风格

• wechatMiniProgramAssistant.maxInlineTextLength

  • 类型：number
  • 默认：30
  • 说明：WXML 在保持单行文本节点时允许的最大文本长度

• wechatMiniProgramAssistant.wxmlPrintWidth

  • 类型：number
  • 默认：80
  • 最小值：60
  • 说明：单行标签目标宽度，超过后会按整段属性逐行换行

• wechatMiniProgramAssistant.wxmlTextInlineThreshold

  • 类型：number
  • 默认：20
  • 说明：WXML 文本节点允许保留单行的最大长度

• wechatMiniProgramAssistant.wxmlInlineThresholds

  • 类型：object
  • 默认：{ text: 20, label: 16, navigator: 18 }
  • 说明：按标签细分的单行文本阈值配置

脚手架相关

• wechatMiniProgramAssistant.defaultScriptLanguage

  • 可选：js / ts
  • 默认：js
  • 说明：新建 Page / Component 时默认生成的脚本语言

• wechatMiniProgramAssistant.defaultStyleLanguage

  • 可选：scss / wxss
  • 默认：scss
  • 说明：新建 Page / Component 时默认生成的样式文件类型

推荐设置

如果你希望保存时自动格式化，最省事的方式是先执行：

• WeChat Mini Program: 一键写入推荐格式化设置

如果你更喜欢手动配置，可以在工作区 .vscode/settings.json 中加入：

{
  "editor.formatOnSave": true,
  "[wxml]": {
    "editor.defaultFormatter": "MelancholyDonkey.wechat-mini-program",
    "editor.formatOnSave": true
  },
  "[wxss]": {
    "editor.defaultFormatter": "MelancholyDonkey.wechat-mini-program",
    "editor.formatOnSave": true
  },
  "[wxs]": {
    "editor.defaultFormatter": "MelancholyDonkey.wechat-mini-program",
    "editor.formatOnSave": true
  },
  "wechatMiniProgramAssistant.wxmlPrintWidth": 80
}

推荐说明

• wxmlPrintWidth = 80：更接近常见 Prettier 风格
• 其余内联文本阈值和引号风格已有默认值，通常只需要优先调整 wxmlPrintWidth
• onlyEnableInMiniProgramProject = true：建议保持开启，避免误伤普通前端项目