Search code examples
htmlphpstormindentationauto-indent

PhpStorm HTML Indentation for attributes

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.

Solution

  • Try this:

    enter image description here

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