mmecvscodeext 小程序开发语法增强插件

✨ Features

✅ WXML 语法高亮
✅ WXML 文件/选中区域格式化（包括 <wxs> 内的 JS 格式化），支持配置缩进空格数
✅ WXML 插值表达式中的变量名支持跳转到 data 定义和 setData 赋值的位置（支持多级 behavior 查找）
✅ WXML 自定义组件 tag 支持点击跳转
✅ WXML 点击纯 CSS 类名字面量跳转到对应的样式位置
✅ WXML 自定义事件/事件处理函数支持点击跳转（多级嵌套 behavior 内的方法也支持）
✅ WXML 支持点击组件 prop 跳转到定义
✅ WXML 支持点击 <wxs src="xxx"/> 跳转到对应的 wxs 文件（以及 <include/> 和 <import/>）
✅ WXML 支持点击 <template is="someTpl.wxml"> 的模板名跳到 <import src="someTpl.wxml" 的位置
✅ CSS/Less/Sass 色板值补全/反向索引
✅ TS 中支持跳转到 behaviors 中声明的方法（支持多级嵌套）
✅ 支持 less 文件中简单的 inline base64 预览
✅ 从模板创建文件 - 支持通过右键菜单快速创建 Behavior 文件和小程序组件文件夹

⌨️ Usage

require VSCode >= 1.80.0

Tip: Cursor 点左上角「关于」也能看到 VSCode 的版本

功能示例

使用模板创建文件

在资源管理器中右键点击文件夹
选择 "小店模板文件"
从列表中选择模板类型：
- 带声明的 Behavior - 创建单个 Behavior 文件
- 小程序组件 - 创建包含 wxml、ts、less、json 的组件文件夹
输入名称并回车，文件将自动创建并打开

示例 1：创建 Behavior 文件

输入 user-info 创建 Behavior 文件，会自动生成 user-infoBehavior.ts：

import { useBehavior } from '@tencent/wx-store-mini-app-utils';
/** 填入Behavior的描述*/
const {
  behaviorID,
  _optType,
} = useBehavior({
  data: {},
  observers: {},
  lifetimes: {},
  methods: {},
});

export default behaviorID;
export type IUserInfo = typeof _optType;

示例 2：创建小程序组件

输入 myButton 创建组件，会自动生成 myButton 文件夹及以下文件：

myButton.wxml - 组件模板
myButton.ts - 组件逻辑
myButton.less - 组件样式
myButton.json - 组件配置

安装

VSCode

前往应用市场安装

Cursor

同 VSCode

Develop

Init

nvm use 20
npm i
npm i -g @vscode/vsce # for package/publish

Debugging

npm run watch

跑起来后，在VSCode中按F5启动调试模式。

Bundle

npm run package
npm run bundle

这将在项目根目录生成一个 .vsix文件，可以通过VSCode的扩展管理器手动安装。

mmecvscodeext

rorycai