CODEWITHSUNDEEP
visual-studio-codeemmet
grimreaper
grimreaper

Reputation: 43

Visual Studio Code (Emmet): Add closing tag comment

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!

Upvotes: 4

Views: 3820

Answers (2)

Ali Asghar
Ali Asghar

Reputation: 21

To get Emmet to add comments and keep them on the same line as the closing tag, add the following to your user settings file in Visual Studio Code, and then restart VSC.

 "emmet.preferences":{
    "filter.commentAfter": "<!-- /[#ID][.CLASS] -->",
  },
  "emmet.syntaxProfiles": {
  // Enable XHTML dialect for HTML syntax
  // “html”: “xhtml”
    "html" : {
      "filters" :"html, c"
      }
  },

Upvotes: 2

Mark
Mark

Reputation: 180785

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.

Upvotes: 5

Related Questions