如何使用 VSCode Prettier 防止每个 html 元素结束标记换行？答案

【问题标题】：How to prevent a line break to every html element end tag using VSCode Prettier?如何使用 VSCode Prettier 防止每个 html 元素结束标记换行？
【发布时间】：2021-01-16 23:03:00
【问题描述】：

这是我目前在我的编辑器上的内容。这实际上是一个 laravel 刀片，所以文件名是page.blade.php。但是，我在files.associate上添加了这些；

"*.blade.php":"html"

<nav
    class="navbar navbar-standard navbar-expand-lg fixed-top navbar-dark navbar-theme"
>
    <div class="container">
        <a class="navbar-brand" href="../index.html"
            ><span class="text-white">{{ config("app.name") }}</span></a
        >
        <button
            class="navbar-toggler collapsed"
            type="button"
            data-toggle="collapse"
            data-target="#navbarStandard"
            aria-controls="navbarStandard"
            aria-expanded="false"
            aria-label="Toggle navigation"
        >
            <span class="navbar-toggler-icon"></span>
        </button>
    </div>
</nav>

因此，如果您在 sn-p 上注意到，> 总是打破界限，这并不好。特别是在</a> 标签上。我尝试编辑HTML>Format: Wrapp Attributes，但它不起作用，请参见附图：

这就是我想要的。

<nav class="navbar navbar-standard navbar-expand-lg fixed-top navbar-dark navbar-theme">
    <div class="container">
        <a class="navbar-brand" href="../index.html">
            <span class="text-white">Logo</span>
        </a>
        <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarStandard" aria-controls="navbarStandard" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
    </div>
</nav>

【问题讨论】：

标签： html visual-studio-code laravel-blade prettier

【解决方案1】：

只需单击右下角纯文本，它将打开一个对话框，键入 html 并选择 HTML。见图1。

然后右键单击并选择格式文档。它会像你想要的那样格式化文件。见图2。

【讨论】：