xmapp-vscode
喜马小程序标签、属性、api的智能补全，支持快速生成代码块
主要功能
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
- 默认只会 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
