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 .