Visual Studio Code (Emmet): Add closing tag comment

Question

So I would like Visual Studio Code (with the aid of Emmet) to be able to transform something like

.wrapper

into this

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

I believe there are solutions for how to do this in Sublime Text and Webstorm, so it would be great to know if there is one for Visual Studio Code as well. Thanks!

Answer 1

You know you can just add |c to the end of your .wrapper to get a comment added at the end like:

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

Infortunately, that puts the trailing comment on a newline. If that is unacceptable, see remove line break before comment and see emmet comment filter for modifying the filer for comments in vscode.

And put this into your settings.json:

"emmet.preferences": {
    "filter.commentAfter": "<!-- /[#ID][.CLASS] -->"
}

I just removed the newline \n from the example comment filter.

Alternatively, it can be done pretty easily with a snippet (in your html.json snippets file):

"emmet with comment": {
    "prefix": ".",
    "body": [
        "<div class='$1'>$2</div><!-- /.$1 -->"
    ],
    "description": "expand with comment"
}

Then type the . and hit tab and type your classname, it will go into both $1's. Tab again to get to the $2 cursor location. [You may have to hit escape if you get suggestions after you type your classname.]

To use the tab completion, change this in your settings:

  // When enabled, Emmet abbreviations are expanded when pressing TAB.
 "emmet.triggerExpansionOnTab": false,

to true.