CODEWITHSUNDEEP
htmlphpstormindentationauto-indent
ruslansteiger
ruslansteiger

Reputation: 552

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.

Upvotes: 5

Views: 1740

Answers (2)

Dmitrii
Dmitrii

Reputation: 3557

Try this:

enter image description here

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

Upvotes: 8

rkeet
rkeet

Reputation: 3468

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).

phpstorm settings

Upvotes: 4

Related Questions