使用 vscode 插件?wxml-vscode 格式化微信小程序 wxml 文件。
1,安装:
vscode 扩展商店搜索?wxml-vscode ,安装。
2,配置
在 vscode setting.json 文件中配置,如下:
// 高亮的颜色,emm暂时只支持这样写
"wxmlConfig.activeColor": {
"color": "#e5c07b"
},
// 是否禁用高亮组件
"wxmlConfig.activeDisable": false,
// 保存格式化
"wxmlConfig.onSaveFormat": true,
// 配置
"wxmlConfig.format": {
"brace_style": "collapse", // 括号风格
"end_with_newline": true, // 用换行符结束输出
"indent_char": " ", // 缩进字符
"indent_handlebars": false,
"indent_inner_html": false,
"indent_scripts": "keep", // 在脚本标签内设置缩进级别
"indent_size": 2,
"indent_with_tabs": false, // 制表符缩进
"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"
]
文档:
vscode 插件 wxml 格式化wxml以及高亮组件tagName。
beautify-web/js-beautify
|