minapp-vscode

wxml/pug/vue 语言中,微信小程序标签、属性的智能补全(同时提供 snippets)

Usage no npm install needed!

<script type="module">
  import minappVscode from 'https://cdn.skypack.dev/minapp-vscode';
</script>

README

minapp-vscode

wxml/pug/vue 语言中,微信小程序标签、属性的智能补全(同时提供 snippets)

最近更新 【see more

  • 【2018-06-05】1.4.0 自动补全支持生成 self close tag。 可以在配置项 minapp-vscode.selfCloseTags 中配置这些 tag
  • 【2018-06-03】1.3.1 wxml 语言中高亮匹配的标签 #72
  • 【2018-05-26】1.3.0 支持 snippets,并内置了一些常用的 snippets 详情见下文
  • 【2018-05-07】1.2.0 模板文件支持变量高亮,详情见下文
  • 【2018-05-03】1.1.0 支持 link,详情见下文
  • 【2018-04-05】1.0.12 开始,支持 pug 语言的自动补全,详情见下文

主要功能

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

标签名与属性名自动补全

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

示例图片

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

  • 当 picker 的 mode="selector" 时,有 rangerange-key 的属性
  • 当 picker 的 mode="time" 时,有 startend 的属性

示例图片

属性值自动补全

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

示例图片

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

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

  1. lang 可以设置为 "wxml""pug",表示使用的语言
  2. minapp 可以设置为 "native", "wepy""mpvue",表示使用的框架,默认为 "mpvue"

如:

  • <template lang="wxml" minapp="native"> 表示使用 wxml 语言,不使用任何框架
  • <template lang="pug" minapp="mpvue"> 表示使用 pug 语言,并使用 mpvue 框架

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

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

示例图片

支持 link(纯 wxml 或 pug 文件才支持,vue 文件不支持)

  • 默认只会 link src 标签,并且文件需要存在,不存在不会加 link
  • 可以配置 minapp-vscode.linkAttributeNames 来扩展额外的支持 link 的标签,将此值配置成空数组,可以禁用 link 功能
  • 可以配置 minapp-vscode.resolveRoots 来使用相对目录解析图片路径

示例图片

自定义组件自动补全(纯 wxml 文件才支持,vue 或 pug 文件不支持)

  • 自动获取对应 json 文件中的组件信息
  • 优先提示自定义组件
  • 自动获取组件中属性的描述

示例图片

模板文件中 js 变量高亮(纯 wxml 或 pug 文件才支持,vue 文件不支持)

  • 默认开启高亮,可以配置 minapp-vscode.disableDecoratetrue 来关闭高亮
  • 默认高亮颜色使用紫色,可以配置 minapp-vscode.decorateType 来使用你喜欢的颜色,如 {"color": "red"}
  • 默认会将 "{{" 与 "}}" 之间的所有字符都高亮,可以配置 minapp-vscode.decorateComplexInterpolationfalse,这样只有变量(如:foo, foo.prop, foo[1])会高亮,而表达式(如:foo + bar, foo < 3)不会高亮,而使用原本的颜色

示例图片

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

已知问题:

  • pug 语言中注释中的变量也会高亮 (pug 是基于缩进的,正则不太好处理)

内置 snippets

  • 自带 swiper/icon/button/picker time/picker date/picker region/checkbox-group/radio-group,见文件
  • 可以通过配置项 minapp-vscode.snippets 来定义你自己的 snippets

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

示例图片

常见问题

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

  1. 确保安装后有重启过 vscode
  2. 确保当前文件的格式是 wxml 或 wxml-pug 或 vue (不能看文件后缀名,因为可能在配置文件中把它们关联的其它文件格式;需要看 vscode 右下解显示的文件类型)
  3. wxml 需要输入 < 才会触发标签补全,而 pug 中只需要输入标签名就会出来自动补全

TODO

  • 单独的 wxml 文件样式实现和 vue 中的 wxml 文件样式一样的风格
  • bind 或 catch 相关的属性可以点击,并跳转到对应的函数上
  • 自动创建文件关联(.cjson, .wxss, .wxs)
  • wxml 文件中路径自动补全
  • 添加常用的 snippets
  • 支持识别 self close tag