Home

Awesome

<img align="right" width="90px" src="https://funimg.pddpic.com/mobile_piggy/0fe81c13-7691-49ae-bb6e-39586d58a1d7.png.slim.png" alt="wxml language features logo" />

WXML - Language Service

CI Status Deploy Status Visual Studio Marketplace Marketplace Downloads Marketplace Installs Marketplace Rating

最近更新 【CHANGELOG.md

@iChenLei 已接手维护本插件,欢迎大家在钉钉群或者 Github issues 提意见。

用户交流钉钉群

用户1群用户2群用户3群
<img src="https://funimg.pddpic.com/vgt/db86d742-5210-472b-ae47-a4a21f89a1a1.jpg.slim.jpeg" width="200px" /><img src="https://funimg.pddpic.com/vgt/8a60773c-2f4c-495a-a63f-45c80b32cacf.jpg.slim.jpeg" width="200px" />暂无

请使用阿里巴巴旗下 钉钉(Dingtalk) APP 扫码进入交流群,反馈 Bug /给插件维护者提需求,相比 Github issues 更加接地气地与插件维护者交流。加一个群即可,1 群满了试试加 2 群。如果遇到二维码过期或者群都满了的问题请提 issue 给插件维护者。

主要功能

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

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

一键创建小程序组件

示例图片

示例图片

{
  "minapp-vscode.cssExtname": "less", // 默认 wxss,支持 styl sass scss less css
  "minapp-vscode.wxmlExtname": "vue", // 默认 wxml,支持 vue wpy
  "minapp-vscode.jsExtname": "ts" // 默认 js,支持 ts coffee
}

<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 来指定。

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

示例图片

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

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

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

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

如:

注意,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

<a id="wxml-formatter"></a>

wxml 格式

支持prettyHtml, js-beautifyprettier(部分内容需要采用兼容html的方式书写)

"minapp-vscode.wxmlFormatter": "wxml", // 指定格式化工具
"minapp-vscode.wxmlFormatter": "jsBeautifyHtml", // 指定格式化工具
// 使用 vscode settings.json 中的 `html.format.[配置字段]` 配置字段, 详见下方 tips.4
"minapp-vscode.jsBeautifyHtml": "useCodeBuiltInHTML",
// 使用自定义配置
"minapp-vscode.jsBeautifyHtml": { // jsBeautify 默认配置
    "content_unformatted": "text",
    "wrap_attributes": "force",
    "indent_size": 2,
    "wrap_attributes_indent_size": 2,
    "void_elements": "image,input,video",
    "indent_scripts": "keep"
}
"minapp-vscode.wxmlFormatter": "prettyHtml", // 指定格式化工具
"minapp-vscode.prettyHtml": { // prettyHtml 默认配置
  "useTabs": false,
  "tabWidth": 2,
  "printWidth": 100,
  "singleQuote": false,
  "usePrettier": true,
  "wrapAttributes": false, // 设置成 true 强制属性换行
  "sortAttributes": false
}
"minapp-vscode.wxmlFormatter": "prettier", // 指定格式化工具
"minapp-vscode.prettier": { // prettier 更多参考 https://prettier.io/docs/en/options.html
  "useTabs": false,
  "tabWidth": 2,
  "printWidth": 100,
  "singleQuote": false
}

常见问题

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

  1. 确保安装后有重启过 VSCode
  2. 确保当前文件的格式是 wxml 或 wxml-pug 或 vue (不能看文件后缀名,因为可能在配置文件中把它们关联的其它文件格式;需要看 vscode 右下角显示的文件类型)

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

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