Vscode插件——微信小程序格式化以及高亮組件wxml-vscode

wxml-vscode

wxml-vscode 倉庫

提問題

安裝

通過 F1 或者 CMD + Shift + P 輸入 install. 選擇: Install Extension.

特性

• 格式化功能
• 高亮組件功能

如何使用格式化功能

格式化 支持 通過 F1 或者 CMD + Shift + P 輸入 format wxml 命令 或者右鍵菜單，也可以配置 wxmlConfig.onSaveFormat 開啟保存后自動格式化

目前可配置項

v0.0.3 增加屬性
wxmlConfig.format.wrap_attributes_count 超過幾個 attributes 屬性則全部轉行

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 可配置的屬性可以這里看

// 高亮的顏色，emm暫時只支持這樣寫
"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,
    "preserve_newlines": true,
    "wrap_attributes": "force-expand-multiline"
  },

  // 高亮所忽略的組件數組
  "wxmlConfig.tagNoActiveArr": [
    "view",
    "button",
    "text",
    "icon",
    "image",
    "navigator",
    "block",
    "input",
    "template",
    "form",
    "camera",
    "textarea"
  ]