使用 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