HTML Auto-comments with Emmet
Emmet does comments
I don't know about you but this was a revelation to me. But you can easily add comments in your HTML files using Emmet.
section.testing>.grid>.child1+.child2
In the above code example we are creating a section with the class of testing, direct child of a div with class grid with a direct child of a div with child1 class and a sibling of div class child 2
<section class="testing">
<div class="grid">
<div class="child1"></div>
<div class="child2"></div>
</div>
</section>
When writing your HTML if you add |c to your Emmet code it will add comments.
Input:
section.testing>.grid>.child1+.child2|c
Output:
<section class="testing">
<div class="grid">
<div class="child1"></div>
<!-- /.child1 -->
<div class="child2"></div>
<!-- /.child2 -->
</div>
<!-- /.grid -->
</section>
<!-- /.testing -->
This works with both IDs and Classes by default.
Just use # instead of .