在PhpStorm中打开和关闭HTML标签时添加自动注释 [英] Add automatic comments upon opening and closing a HTML tag in PhpStorm

问题描述

我想为每个< div class => / < div id => / code>和它们各自的< / div> 的。

有一个< div class =main-container> ，我想在它之后的注释是<！ - Start of .main-container - >

然后在< / div> 我想要一个<！ - 结束.main-container - >

 < div id =container> <！ -  #container的开始 - > 
< div class =container-text> <！ -  .container-text的开头 - > 
< h2> Foo< / h2> 
< / div> <！ -  .container-text结尾 - > 
< / div> <！ -  #container结束 - > 
  

有什么办法可以通过PhpStorm自动执行此操作吗？我无法弄清楚，任何帮助将不胜感激，提前致谢。

解决方案

是和否同一时间。

选项1：创建并使用自定义

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.

解决方案

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

这篇关于在PhpStorm中打开和关闭HTML标签时添加自动注释的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！