欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-06-19 23:32:59
wxml vscode "wxml vscode 仓库" "提问题" 安装 通过 F1 或者 CMD + Shift + P 输入 install. 选择: Install Extension. 特性 格式化功能 高亮组件功能 如何使用格式化功能 格式化 支持 通过 F1 或者 CMD + Shif ......

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" ></button>
<!-- ⬇⬇⬇⬇ -->
<button
  id="x"
  class="xx"
></button>
<button id="x" ></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"
  ]