Edit Emmet Auto Comment Closing Tag | VS Code

Question

Is there a way for the following changes to the auto-complete a comment using Emmet in VS code:

1. Auto-add comment to a UL tag? Currently, it will do it of an #ID and.class

2. Is it possible to edit the auto comment to add End ie:

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

change to:

  <div class="hero"></div>
  <!-- /.End hero -->


Here's the code in the VS Code User Preferences:

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

Answer 1

You can just add the text you want to the comment filter:

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

You will end up with:

<div class="hi"></div>
<!-- /End .hi -->

<div id="hi"></div>
<!-- /End #hi -->

Note the . or # will be before the class or id in the comment - no way to change that.

If you don't want the . or # use this instead:

"filter.commentAfter": "\n<!-- /End [ID][CLASS] -->"

Also, the slash / before END is purely optional - it is just more text you added - you can remove that if you want. And I moved the \n from where you had it in your question.