PhpStorm HTML缩进属性

Question

For tags with lots of attributes I want to split every single attribute on a new line and it should indent with just a single tab when I press enter to invoke a new line.

Following example output how I want to indent my attributes:

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

But PhpStorm automatically tries to indent all my lines to the current attribute:

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

I couldn't find any option in the Settings (Editor -> Code Style -> HTML) to change this behavior. Does anyone know a solution for this problem?

The reasoning behind this is because I use often custom tags in my HTML-Template. Sometimes my own tags are pretty long and are combination of 2 or (in rare cases) 3 words and there it is handy to start all extra attributes on a new line and it shouldn't align on the end of the tag. It is troublesome to indent the attributes on my own. I want to automate it.

Answer 1

Try this:

This way I got the code formatted the way you wanted.

Answer 2

Had a look for you.

The red fixes your initial problem of having each attribute on a new line. However, it does keep aligning with the first attribute of the element. No option available in the HTML settings to have the first attribute also on a new line with a single tab indent.

The other 2 colours:

Green shows how it decides on before which elements to insert a new element. Orange shows which are inline elements.

If you would like a new line before certain inline elements, you might want to remove them from the inline elements option (orange) and insert them in the new line before option (green).