微信小程序标签、属性的智能补全（同时支持原生小程序、mpvue 和 wepy 框架，并提供 snippets）

最近更新 【 see more 】

<!-- <div style="color:red; font-size: 1.6em;">重要通知：由于旧版本不小心被我删除了，所以请 1.0.7 版本之前的用户删除旧版本再重新安装新版本；否则可能会无法成功安装新版本，并且也得不到新版本的推送！</div> -->

所有自动补全的模板数据都来自于官方文档，通过 脚本 自动获取的

<a id="tag-and-attr"></a>

标签名与属性名自动补全

<a id="smart-attr"></a>

根据组件已有的属性，自动筛选出对应支持的属性集合

<a id="attr-value"></a>

属性值自动补全（有可选值的情况下才会触发补全）

<a id="attr-definition"></a>

点击模板文件中的函数或属性跳转到 js/ts 定义的地方（纯 wxml 或 pug 文件才支持，vue 文件不完全支持）

功能还不完善，只会查找和当前模板同名的脚本文件，所以有可能会找不到JS中的定义

<a id="attr-class-value"></a>

样式名自动补全（纯 wxml 或 pug 文件才支持，vue 文件不完全支持）

系统会自动获取和当前模板同名的样式文件中的所有样式名，同时还能获取样式名上的 /** */ 中的文档；如果有全局的样式，需要通过配置项 minapp-vscode.globalStyleFiles 来指定

默认会获取和当前模板同名的样式文件中的名称

注意：如果样式文件是 @import 了另一个样式文件，则程序不会去获取这个引入的文件中的样式名

另外可以使用 minapp-vscode.globalStyleFiles 来指定一些全局的样式文件，这样在输入 class="" 后就也会出现这些文件中的样式名

小程序的 app.wxss 一般是全局的样式，所以需要你手动通过此配置来指定，如配置 minapp-vscode.globalStyleFiles: ["src/app.wxss"]

另外也可以使用 minapp-vscode.styleExtensions 来指定系统使用的样式文件的后缀

建议配置此项，系统默认会查找各种后缀的样式文件，为避免不必要的性能损耗，最好配置成项目中使用的后缀！

注意：不支持 sass 这种缩进排版的样式文件

<a id="vue"></a>

在 vue 模板文件中也能自动补全，同时支持 pug 语言

vue 中的 template 板支持两个属性：

注意， mpvue 中指定 lang="wxml" 会报错 ，需要等待作者修复！不过 你可以临时使用 xlang="wxml" ，但这样同时也会触发 vue 的自动补全

指定为不同的 minapp 值会触发对应框架的自动补全，由于本人没有使用 wepy 和 mpvue 开发过，所以这些自动补全是根据官方文档说明而加上的，如果有错误，欢迎 PR（只需要修改文件 src/plugin/lib/language.ts )

<a id="link"></a>

支持 link（纯 wxml 或 pug 文件才支持，vue 文件不支持）

<a id="custom-component"></a>

自定义组件自动补全（纯 wxml 文件才支持，vue 或 pug 文件不支持）

<a id="highlight"></a>

模板文件中 js 变量高亮（纯 wxml 或 pug 文件才支持，vue 文件不支持）

为了加快解析速度，颜色高亮使用的是正则表达式匹配，所以可能会出现匹配错误的情况；如果不满意，可以配置 minapp-vscode.disableDecorate 来禁用颜色高亮功能

已知问题：

<a id="snippets"></a>

内置 snippets

和官方的 Snippets 的区别时，这里的 Snippets 只需要指定 key 和 body 即可，组件描述自动会根据 key 来获取（另外后期可以让配置和内置的数据结合起来）

<a id="emmet"></a>

支持 emmet 写法

emmet cheat sheet

安装插件后没有出现自动补全

在非小程序项目，pug 文件不想要小程序的自动补全

minapp 插件会自动将 .pug 文件关联到 wxml-pug 文件类型。所以你只需要在具体的项目中配置一下文件关联就行了。