属性的PhpStorm HTML缩进

时间:2018-06-27 07:31:06

标签: html phpstorm indentation auto-indent

对于具有很多属性的标记,我想在新行上拆分每个属性,当我按Enter调用新行时,它应该只缩进一个选项卡。

以下示例输出了我想如何缩进属性:

<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模板中使用自定义标签。有时我自己的标签很长,是2个或3个(在极少数情况下)3个单词的组合,因此可以方便地在新行上开始所有额外的属性,并且标签的末尾不应对齐。自己缩进属性很麻烦。我想使其自动化。

2 个答案:

答案 0 :(得分:4)

尝试一下:

enter image description here

通过这种方式,我以所需的方式格式化了代码。

答案 1 :(得分:3)

帮你看看。

红色解决了您最初将每个属性放在新行上的问题。但是,它的确与该元素的第一个属性保持一致。 HTML设置中没有可用选项使第一个属性也位于带有单个选项卡缩进的新行中。

其他2种颜色:

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

如果您想在某些内联元素之前换行,则可能要从内联元素选项(橙色)中将其删除,然后将其插入换行之前 >选项(绿色)。

phpstorm settings