Add automatic comments upon opening and closing a HTML tag in PhpStorm

Question

I want to add HTML comments proceeding each <div class=""> / <div id=""> and their respective </div>'s.

For example, say I have a <div class="main-container">, I want a comment right after it to be <!-- Start of .main-container -->

And then after its </div> I want a <!-- End of .main-container -->

An example of what everything would look like:

<div id="container"> <!-- Start of #container -->
    <div class="container-text"> <!-- Start of .container-text -->
        <h2> Foo </h2>
    </div> <!-- End of .container-text -->
</div> <!-- End of #container -->

Is there any way to automate this with PhpStorm? I can't figure it out, any help will be greatly appreciated, thank you in advance.

Answer 1

Yes and No at the same time.

Option 1: Create and use custom Live Template where you can have any text/code you want. For example:

<div id="$NAME$"> <!-- Start of #$NAME$ -->
    $END$
</div> <!-- End of #$NAME$ -->

---

Option 2: If you are using Emmet .. it has an option (a filter in Emmet terms) to add closing comment.

That's where "no" part comes in: 1) only closing comment and 2) it will be placed on new line (depends on your code formatting settings, I guess) and have a bit different style:

<div class="container"></div>
<!-- /.container -->

Such option is available at Settings/Preferences | Editor | Emmet | HTML --> Comment tags