更美的插图-void-html

项目状况通知

2026年9月10日更新

我在软化我已有一段时间的这个项目的“维持模式”。 说清楚, 我不会突然在这个项目上花更多的时间. 相反,我想亲切地将这个插件"精致地完成".

此插件的目标适度: 增强 Pretier formatter , 以便“ 自闭” 标记语法(/>)在HTML代码中从未被放出。 如果受影响的标记是 无效元素,此选项将删除斜线字符。 如果受影响的元素不是空元素,则插入其关闭标记。 [^1]

[^1]:我看到了一些论点,认为它不应该这样做,因为这改变了文件的语义。 我正在考虑为此增加一个配置选项。 如果你对此感兴趣,请创造出一个新问题让我知道.

为此,这个插件在功能上是完整的. 我将不增加对其他类似HTML语言的支持(Vue一直是一个常见的请求),也不会增加新的功能(脚注中注意到一个提示)。 欢迎您将这个项目叉开,以便加入那些东西,如果您愿意的话.

这个项目剩下的只是继续修复bug,并在Pretier发行时支持新版本. 我打算无限期地这样做.

与我以前说过的相反,我不会提出将这个储存库的所有权转让给任何人。 我将保留所有权[^2],我将尽我所能支持它,只要我的可用性和能量允许.

[^2]:但我, 考虑 远离GitHub,因为我的价值观不再符合这个平台似乎正在移动的方向.

我很幸运收到一些来自陌生人的高质量贡献, 无论是提供详细的bug报告, 修复那些bug, 还是在Pretier的新版本发布时增加测试覆盖。 我非常感谢那些人! 请继续走 这就是打开源的全部内容,您的贡献帮助了每个月下载此插件的上千个项目(QQ). 再次谢谢你.

- 东尼

软件包摘要

这是一个 高级插件 改为格式 无效的 HTML 元素 使用空标签语法而不是自闭语法. 此外,如果在非活性元素上使用自闭语法,那么它们会被"被解封",这样打开和关闭标记都存在.

安装

此软件包托管于 国家预防机制。用您选择的软件包管理器安装. 国家防范机制X 似乎为很多人提供了指示.

此软件包通常被安装为dev依赖. 它假设一个节点.js运行时间,作为Prettier的插件,它假设您有一个支持的版本 prettier 已安装 .

npm install -D @awmottaz/prettier-plugin-void-html

下一个,将插件添加到您的 Pretier 配置文件。 。 。 .

{
  "plugins": ["@awmottaz/prettier-plugin-void-html"]
}

此插件会做什么

安装并激活插件后, Prettier 将使用以下扩增格式格式格式化您的 HTML 源代码, 用于 Prettier 的默认格式 :

• 虚拟元素使用平面打印 > 关闭标签的符号
• 非无效元素, 如果作者带有自闭标签 />,将“未包装”以明确包含关闭标记.

<!-- original source -->
<meta charset="UTF-8">
<label for="my-input">Type something</label>
<input id="my-input" type="text" name="my-input">
<div />

<!-- Prettier's default formatting without this plugin -->
<meta charset="UTF-8" />
<label for="my-input">Type something</label>
<input id="my-input" type="text" name="my-input" />
<div />

<!-- Prettier's formatting with this plugin -->
<meta charset="UTF-8">
<label for="my-input">Type something</label>
<input id="my-input" type="text" name="my-input">
<div></div>

兼容性

高级

此包从v3.0.0开始对所有版本的Prettier进行测试,直至发布时的最新版本. 见 test.js 测试的准确版本和 CHANGELOG.md 用于插件版本的支持.

注意 peerDependencies 此软件包允许安装更新 补丁版本 c. 可能未列入本清单的Pretier。 这是出于务实的原因,这样你就可以升级Prettier的补丁版,而无需等待这个软件包更新.

但是,请注意: 高级安装页面数字 :

在您的工程中安装精确的 Pretier 本地版本 。 这可以确保项目中的每个人都得到Pretier的准确版本. 即使Prettier的补丁发布也会导致格式稍有不同,所以你不希望不同的团队成员使用不同的版本,并前后格式化对方的更改.

如果您想要使用此软件包不支持的 Pretier 版本,然后需要添加一个 overrides 规则。例如,使用更古老的Pretier:

{
  "overrides": {
    "@awmottaz/prettier-plugin-void-html": {
      "prettier": ">=2.8.8"
    }
  }
}

如果你这样做,请考虑 有助于更漂亮的插图-void-html 为该版本添加测试,或 打开一个问题我乐于扩大支持,但我也需要现实一点.

语文

此插件只支持 HTML 语言( 即 "html" 解析器) (中文(简体) ).

对其它语言如Svelte或Vue的支持需要使用完全不同的解析器,并且不属于此插件的范围.

如果您想要用另一种语言提供这个软件包的功能,我建议向处理这些语言格式化的其他项目提交反馈.

虚拟元素

https://developer.mozilla.org/en-US/docs/Glossary/Void element 互联网档案馆的存檔,存档日期2014-12-21

此插件确认以下元素为空白元素 :

• area
• base
• br
• col
• embed
• hr
• img
• input
• link
• meta
• param
• source
• track
• wbr