How to align the start tags and end tags of HTML elements when formatting code

I'm trying to find a way to make WebStorm and PyCharm align the start tags and end tags of HTML elements when I do 'Reformat Code' (Ctrl+Alt+L). Consider these 2 blocks of code:

Block A:

<label>Date:
<select name="month">
<option>Jan</option>
<option>Feb</option>
<option>Mar</option>
</select></label>

Block B:

<label>Date:
<select name="month">
<option>Jan</option>
<option>Feb</option>
<option>Mar</option>
</select>
</label>

Notice how in Block B, the closing tag for label is on its own line at the bottom, aligned with the opening tag for label. This is what I always want.

In the JetBrains IDEs, no matter whether I type the code like in Block A or Block B, when I choose to 'Reformat Code' it keeps everything as is. I've looked through the Code Style settings for HTML and I can't find any way to make it so that the closing tag always moves to be in alignment with the opening tag, like in Block B.

Does anyone have any ideas?

 

10 comments
Comment actions Permalink

Remove select from Inline elements: list in Settings | Editor | Code Style | HTML, Other

1
Comment actions Permalink

I don't think that's what I'm looking for.

First, that will only work for a specific tag like in the example I gave, but not all tags like I'm wanting.

Second, that setting controls whether a particular tag is always moved to a new line.

What I'm wanting is for the end tag to move to be aligned with wherever the opening tag is. Sometimes that will be on a new line (i.e. because the opening tag is on its own line), and sometimes not (i.e. because the opening tag is inline).

0
Comment actions Permalink

>First, that will only work for a specific tag like in the example I gave, but not all tags like I'm wanting.

You can do this for other tags as well

 

>What I'm wanting is for the end tag to move to be aligned with wherever the opening tag is. Sometimes that will be on a new line (i.e. because the opening tag is on its own line), and sometimes not (i.e. because the opening tag is inline).

haven't got what you mean. Please provide the example of desired folmatting when the opening tag is inline

0
Comment actions Permalink

Here is an example where I don't want the IDE to move the closing </label> tag anywhere.

<label>Something</label>

Here is an example where I do want the IDE to move the closing </label> tag down to the next line.

<label>Date:
<select name="month">
<option>Jan</option>
<option>Feb</option>
<option>Mar</option>
</select></label>

I want the IDE to make sure that end tags are aligned with opening tags. Note that I want this to happen with all elements, not just 'label'.

0
Comment actions Permalink

But with the change I've suggested <label> is not moved when inlined like

<label>Something</label>
1
Comment actions Permalink

We really are talking about different things. You're referring to how to make sure a specific element is always on its own line. I'm referring to making sure that the end tags are always aligned with the start tags, wherever they may be, for all elements.

To change to a different example, consider this:

<label>Date:
<select name="month">
<option>Jan</option>
<option>Feb</option>
<option>Mar</option></select><label>Something</label>
</label>

In this example, let's say I'm happy to have the label 'Something' on the same line as the end </select> tag. But because of where the start <select> tag is, I'm expecting the end </select> tag to be moved so that it's aligned with the start <select> tag. So when I hit Ctrl+Alt+L, I would like the IDE to change it to this:

<label>Date:
<select name="month">
<option>Jan</option>
<option>Feb</option>
<option>Mar</option>
</select><label>Something</label>
</label>

This is what seems impossible to do.

1
Comment actions Permalink

I think I have the same need as Eldaw. when a closing tag is not on the same line as the opening one, I prefer it to be alone on the same indent. (it come from python's pep8)

 

to give more example, taken from the snipet in the code style > html settings:

    <div id="secondcol">
        <p class="moredownload"><a href="download/index.html" title="Download IntelliJ IDEA Java IDE"><b>download</b></a>
        </p>
        <p class="morebuy"><a href="buy/index.html" title="Buy IntelliJ IDEA Java IDE"><b>buy</b></a></p>
    </div>

 

the first p close the line after it open, and the content is not readable. my personal rule (issued from pep8) is :

if a tag cannot be inline (start and end on the same line), it must be multiline, with:

- first line: tag oppening, nothing more, may be multiline if attributes is too long

- next lines: tag content, with same rule apply on child tags

- last line: tag closing, nothing more.

 

this give me, for the previous snipet:

 

    <div id="secondcol">
        <p class="moredownload">

            <a href="download/index.html" title="Download IntelliJ IDEA Java IDE"><b>download</b></a>
        </p>
        <p class="morebuy"><a href="buy/index.html" title="Buy IntelliJ IDEA Java IDE"><b>buy</b></a></p>
    </div>

 

I understand it's all some personal preferences, but it seem «pythonic» and I'm sure I'm not the only developper folowing pep8 on more laguage than python.

 

for now, I have something similar, with a nearly empty list of «inline elements» and «don't break if inline content» only with title and div

1
Comment actions Permalink

Same requirement.

Any updates for this?
Should we wait longer for response or open a ticket, or... I don't know, please advise :)

1
Comment actions Permalink

Guys, listen to Elena. Her advice worked for me. You need to remove select (or any tag listed) from being an inline element. Then if you do CTRL + ALT + SHIFT + L and reformat, it will format it the way you are expecting.

1
Comment actions Permalink

This is still an issue. Elenas solution makes all the elements indented. If its within the limit elements should be inline. If not or if multilined then elements should be indented. This cannot be achieved so far with settings 

0

Please sign in to leave a comment.