PhpStorm HTML 属性缩进

Question

对于具有很多属性的标签，我想将每个属性拆分成一个新行，当我按回车键调用一个新行时，它应该只缩进一个制表符。

以下示例输出我想如何缩进我的属性：

<svg width="300px" height="150px">
    <ellipse class="fill-current" 
        cx="150" 
        cy="75" 
        rx="100"
        ry="75"
    />
</svg>

但是 PhpStorm 会自动尝试将我的所有行缩进到当前属性：

<svg width="300px" height="150px">
    <ellipse class="fill-current"
             cx="150"
             cy="75"
             rx="100"
             ry="75"
    />
</svg>

我在设置（编辑器 -> 代码样式 -> HTML）中找不到任何选项来更改此行为。有人知道这个问题的解决方案吗？

这背后的原因是因为我经常在 HTML-Template 中使用自定义标签。有时我自己的标签很长，是 2 个或（在极少数情况下）3 个单词的组合，在新行上开始所有额外属性很方便，它不应该与标签的末尾对齐。自己缩进属性很麻烦。我想自动化它。

Answer 1

找过你了。

红色解决了您最初将每个属性都放在新行上的问题。但是，它确实与元素的第一个属性保持一致。 HTML 设置中没有选项可以让第一个属性也在一个新行上使用单个制表符缩进。

其他2种颜色：

绿色显示了它如何决定在哪些元素之前插入新元素。橙色表示哪些是内联元素。

如果您想要在某些内联元素之前换行，您可能需要从 内联元素 选项（橙色）中删除它们并将它们插入选项之前的新行（绿色）。

Answer 2

试试这个：

这样我就按照你想要的方式格式化了代码。

PhpStorm HTML 属性缩进

PhpStorm HTML Indentation for attributes

html

indentation

auto-indent

phpstorm