xmapp

tian

|
361 installs
| (0) | Free
喜马小程序标签、属性、api的智能补全，支持快速生成代码块
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

xmapp-vscode

喜马小程序标签、属性、api的智能补全，支持快速生成代码块

主要功能

bind事件提示

  • 输入 bind 会提示所有事件

标签名与属性名自动补全

  • 输入 < 会触发标签补全
  • 输入空格会触发对应标签的属性补全

示例图片

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

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

示例图片

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

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

示例图片

点击模板文件中的函数或属性跳转到 js/ts 定义的地方

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

示例图片

样式名自动补全

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

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

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

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

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

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

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

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

示例图片

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

示例图片

自定义组件自动补全

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

示例图片

模板文件中 js 变量高亮

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

示例图片

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

内置 snippets

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

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

示例图片

支持 emmet 写法

示例图片

emmet cheat sheet

格式化

配置文件.xmconfig放在项目根目录下，示例：

{
    "indent-size": 4,
    "wrap_attributes": "force-expand-multiline",
    "wrap_attributes_count": 2
}

<view>
<text class="bbb" >{{r}}</text><input value="111" class="aaa" ></input>
</view>
<!-- ⬇⬇⬇⬇ -->
<view>
    <text class="bbb" >{{r}}</text>
    <input
        value="111"
        class="aaa"
    />
</view>
配置项 默认值 类型 含义
indent_size 4 number 缩进
indent_char " " string 缩进符号
indent_with_tabs false boolean 用制表符缩进
eol "\n" string 行终止符
unformatted 不重新格式化的标签列表
content_unformatted 内容不重新格式化的标签列表
extra_liners 标签前面应该有一个额外换行符的标签列表
editorconfig false boolean 使用editorconfig的设置
wrap_line_length number 每行换行长度最大字符数
wrap_attributes auto auto、force、force-aligned、force-expand-multiline、aligned-multiple 将属性换行到新行
wrap_attributes_count 1 number 属性换行的最小属性数

小程序 API 提示

键入 xm. ，就会出现提示，然后回车。

快速生成代码块

键入关键词 xm，就会出现提示，然后回车。关键词不区分大小写。

app.json 快速配置

键入关键词 pages / window / preloadRule / tabbar / requiredBackgroundModes / subPackages / prefetches 可快速生成 App 对应的 JSON 文件配置项

page.json 快速配置

键入关键词 page-json 可快速生成 Page 页面对应的 JSON 文件配置项

开发者

下载依赖

npm install
npm run postinstall

调试

生成dist文件

npm run watch

F5 打开调试项目

打包

生成vsix文件

npm run package

使用vsix文件

从扩展的右上角选择Install from VSIX安装

发布

npm run publish

使用插件

从扩展搜索xmapp