微信小程序标签、属性的智能补全(同时支持原生小程序、mpvue 和 wepy 框架,并提供 snippets)(微信小程序绑定属性)

网友投稿 1054 2022-10-08

微信小程序标签、属性的智能补全(同时支持原生小程序、mpvue 和 wepy 框架,并提供 snippets)(微信小程序绑定属性)

微信小程序标签、属性的智能补全(同时支持原生小程序、mpvue 和 wepy 框架,并提供 snippets)(微信小程序绑定属性)

minapp-vscode

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

最近更新 【see more】

【2019-07-06】2.1.0 添加 showSuggestionOnEnter 配置,按 Enter 键默认不出现补全,需要将 showSuggestionOnEnter 设置成 true【2019-07-01】2.0.0 优化 wxml 的自动补全机制,优化语法高亮【2019-06-21】1.16.0 标签多行写法可补全,tagName 和 tagAttr 可以随时补全【2019-06-09】1.15.0 支持解析 sass/scss 文件,方便样式名自动补全【2019-06-03】1.14.0 wxmlFormatter 配置支持热更新,同时 prettyHtml 不会移除自闭合标签的 / 符号【2019-04-23】1.13.0 wxml 支持 prettier和 prettyHtml

主要功能

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

标签名与属性名自动补全

wxml 中需要输入 < 才会触发标签补全,而 pug 语言只需要写标签开头即能触发标签补全输入空格会触发对应标签的属性补全

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

当 picker 的 mode="selector" 时,有 range 和 range-key 的属性当 picker 的 mode="time" 时,有 start 和 end 的属性

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

在属性值中输入空格可以触发,补全后自动会将空格覆盖

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

样式名自动补全(纯 wxml 或 pug 文件才支持,vue 文件不完全支持)

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

默认会获取和当前模板同名的样式文件中的名称 注意:如果样式文件是 @import 了另一个样式文件,则程序不会去获取这个引入的文件中的样式名 另外可以使用 minapp-vscode.globalStyleFiles 来指定一些全局的样式文件,这样在输入 class="" 后就也会出现这些文件中的样式名 小程序的 app.wxss 一般是全局的样式,所以需要你手动通过此配置来指定,如配置 minapp-vscode.globalStyleFiles: ["src/app.wxss"] 另外也可以使用 minapp-vscode.styleExtensions 来指定系统使用的样式文件的后缀 建议配置此项,系统默认会查找各种后缀的样式文件,为避免不必要的性能损耗,最好配置成项目中使用的后缀!

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

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

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

lang 可以设置为 "wxml" 或 "pug",表示使用的语言(在类 vue 框架中指定 lang 属性可能会导致编译报错,你可以使用 xlang 替代,但这样会同时出现 vue 和 minapp 的补全)minapp 可以设置为 "native", "wepy","mpx" 或 "mpvue",表示使用的框架,默认为 "mpvue"

如: