VSCode 将 HTML 属性包装在自己的行中

Question

我正在 VSCode 中寻找提供以下功能的设置或扩展：

• 保存时格式化
• 将 html 属性换行，即使只有一个属性
• 将开始标签的结束符号放在新行上，与标签对齐
• 按字母顺序排列属性
• 不按照第一个属性的位置对齐属性，简单使用一级缩进

示例1：

<span my-attr="value">Hello, world!</span>

成为

<span
    my-attr="value"
>
    Hello, world!
</span>

示例2：

<x-status-indicator wire:click="pushMe" class="block" :status="$status" 
    :description="$description" />

然后变成

<x-status-indicator
    :description="$description"
    :status="$status"
    class="block"
    wire:click="pushMe"
/>

到目前为止，已经有很多关于格式化的帖子，但我找不到满足这些要求的单个帖子或扩展。任何建议将不胜感激，谢谢！ :)

Answer 1

这是默认 HTML 格式化程序提供的。

设置 > 搜索

html.format.wrapAttributes

> 将其设置为

force-expand-multiline

你的例子将变成：

格式化前：

<x-status-indicator wire:click="pushMe" class="block" :status="$status" 
    :description="$description" />

格式化后：

<x-status-indicator
    wire:click="pushMe"
    class="block"
    :status="$status"
    :description="$description"
/>

Answer 2

我一直在寻找相同的行为，这就是我最终得到的结果。

背景

VS Code 的

html.format.wrapAttributes: 'force-expand-multiline'

选项具有误导性。上下文消息指出：“包装除第一个属性之外的每个属性。”实际行为是：“如果标签有多个属性，则包装每个属性；否则，请勿包裹。'

经过一番搜索，我发现 VS Code 中的默认格式化程序在底层使用了 js-beautify。这是here，您可以在其中看到默认格式化程序的选项。我注意到，在 js-beautify options 中，有一个名为

--wrap-attributes-min-attrs

的设置可以实现此行为，但尚未在 VS Code 中实现。 VS Code HTML 格式化程序默认为选项

2

，这解释了为什么单个属性标记不返回新行（我尝试将其添加到用户设置 JSON 中，但无法识别。）。

解决方案

使用VS Code格式化程序发布的插件

“Prettier”接缝添加了选项

singleAttributePerLine

（2022 年 3 月 2.6 中）。 请参阅发行说明。

使用您自己的格式化程序

这是一个基于我编写的

js-beautify

的快速示例格式化程序。它基本上加载了 js-beautify 格式化程序，添加了选项

wrap_attributes_min_attrs: 0

以允许包装单属性标签（参见

./extension.js

）。我尚未将其发布到 VS Code 扩展商店，但如果您想尝试一下，请执行以下命令：

• npm clone https://github.com/kzlucas/vscode-ext-html-formatter-force-wrap-attributes

• cd vscode-ext-html-formatter-force-wrap-attributes

• npm install

• npm install -g @vscode/vsce

• vsce package

• code --install-extension ./html-formatter--wrap-all-attributes-0.0.1.vsix

• Ctrl + shift + P

  >

  Reload Window

这里是有关Formatter API的相关VS Code官方文档。

PR VS 代码仓库

您可以向 Microsoft VSCode Repository 提交 PR，看看他们是否可以更新 HTML 格式化程序以考虑此选项。