Awesome
wxml-vscode
该库我已不再维护,但需要的话可以提pr或者各自fork单独修改
安装
通过 F1 或者 CMD + Shift + P 输入 install. 选择: Install Extension.
特性
- 格式化功能
- 高亮组件功能
如何使用格式化功能
格式化 支持 通过 F1 或者 CMD + Shift + P 输入 format wxml 命令 或者右键菜单,也可以配置 wxmlConfig.onSaveFormat 开启保存后自动格式化
example
<!-- if wxmlConfig.format.wrap_attributes_count === 2 -->
<button id="x" class="xx"></button>
<button id="x">123</button>
<!-- ⬇⬇⬇⬇ -->
<button id="x" class="xx" />
<button id="x">123</button>
wxmlConfig.format 无特殊说明的配置的属性可以这里看
// 高亮的颜色,可设置每个组件的自定义颜色, tagName:color
// 例如 <custom> 想渲染成黄色,可以添加字段 "custom":"yellow"
"wxmlConfig.activeColor": {
"color": "#e5c07b"
},
// 是否禁用高亮组件
"wxmlConfig.activeDisable": false,
// 是否开启保存自动格式化
"wxmlConfig.onSaveFormat": false,
"wxmlConfig.format": {
"brace_style": "collapse",
"end_with_newline": false,
"indent_char": "",
"indent_handlebars": false,
"indent_inner_html": false,
"indent_scripts": "keep",
"indent_size": 2,
"indent_with_tabs": true,
"max_preserve_newlines": 1,
"wrap_attributes_count": 4,
"unformatted": "['text']",
"disable_automatic_closing_labels": false,
"preserve_newlines": true,
"wrap_attributes": "force-expand-multiline"
},
// 高亮所忽略的组件数组
"wxmlConfig.tagNoActiveArr": [
"view",
"button",
"text",
"icon",
"image",
"navigator",
"block",
"input",
"template",
"form",
"camera",
"textarea"
]