---
title: Closing Comments in Emmet with Visual Studio Code
date: 2017-09-13T10:59:00-04:00
author: cc_admin
canonical_url: "https://caffeinecreations.ca/blog/closing-comments-in-emmet-with-visual-studio-code/"
section: Blog
---
![Emmet Logo](https://caffeinecreations.ca/uploads/blog/_1920x660_crop_center-center_none_ns/emmet-logo.jpg)

- [Web Development](https://caffeinecreations.ca/blog/category/web-development/), [Code](https://caffeinecreations.ca/blog/category/code/)

# Closing Comments in Emmet with Visual Studio Code

I recently switched from using Sublime Text as my code editor to using Visual Studio Code (VSC). There's a lot to like with VSC especially the integrated terminal and [Emmet](https://emmet.io/) out of the box.

One thing that I was missing is having Emmet create closing comments which I had previously blogged [about here](https://caffeinecreations.ca/blog/automatically-add-comments-with-emmet/).

I tried the process there but it wasn't working and after googling I found this [github thread](https://github.com/Microsoft/vscode/issues/32496). This ultimately led to the solution that the syntax has changed in the latest version of Emmet which ships with VSC.

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.

```
<button class="absolute z-10 flex items-center justify-center w-10 h-10 -translate-y-1/2 bg-gray-300 border rounded-full shadow-sm border-grey-darker -right-4 -top-4" clipboard="" title="Copy to Clipboard" to="" type="button" x-clipboard.raw=""emmet.preferences":{
    "filter.commentAfter": "<!-- /[#ID][.CLASS] -->",
  },
  "emmet.syntaxProfiles": {
  // Enable XHTML dialect for HTML syntax
  // “html”: “xhtml”
    "html" : {
      "filters" :"html, c"
      }
  }," x-data=""><svg class="h-5 w-5" viewbox="0 0 64 64" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
  <path d="M53.98 9.143h-3.97c-.082 0-.155.028-.232.047V5.023C49.778 2.253 47.473 0 44.64 0H10.217C7.384 0 5.08 2.253 5.08 5.023v46.843c0 2.77 2.305 5.023 5.138 5.023h6.037v2.268c0 2.67 2.216 4.843 4.941 4.843H53.98c2.725 0 4.942-2.173 4.942-4.843v-45.17c0-2.671-2.217-4.844-4.942-4.844zM7.11 51.866V5.023c0-1.649 1.394-2.991 3.106-2.991H44.64c1.712 0 3.106 1.342 3.106 2.99v46.844c0 1.649-1.394 2.991-3.106 2.991H10.217c-1.712 0-3.106-1.342-3.106-2.99zm49.778 7.29c0 1.551-1.306 2.812-2.91 2.812H21.195c-1.604 0-2.91-1.26-2.91-2.811v-2.268H44.64c2.833 0 5.138-2.253 5.138-5.023V11.128c.077.018.15.047.233.047h3.968c1.604 0 2.91 1.26 2.91 2.811v45.17z"></path>
  <path d="M38.603 13.206H16.254a1.015 1.015 0 1 0 0 2.032h22.35a1.015 1.015 0 1 0 0-2.032zM38.603 21.333H16.254a1.015 1.015 0 1 0 0 2.032h22.35a1.015 1.015 0 1 0 0-2.032zM38.603 29.46H16.254a1.015 1.015 0 1 0 0 2.032h22.35a1.015 1.015 0 1 0 0-2.032zM28.444 37.587h-12.19a1.015 1.015 0 1 0 0 2.032h12.19a1.015 1.015 0 1 0 0-2.032z"></path>
</svg>
<div class="sr-only">Copy to clipboard</div></button>```javascript
"emmet.preferences":{
    "filter.commentAfter": "<!-- /[#ID][.CLASS] -->",
  },
  "emmet.syntaxProfiles": {
  // Enable XHTML dialect for HTML syntax
  // “html”: “xhtml”
    "html" : {
      "filters" :"html, c"
      }
  },
```
```

## More Articles You May Like

[![Automatically Add Comments with Emmet Thumbnail](https://caffeinecreations.ca/uploads/blog/_680x320_crop_center-center_65_none_ns/emmet-logo.jpg)### Automatically Add Comments with Emmet](https://caffeinecreations.ca/blog/automatically-add-comments-with-emmet/)

[![Craft Twig Cheatsheet for Visual Studio Code Thumbnail](https://caffeinecreations.ca/uploads/blog/_680x320_crop_center-center_65_none_ns/craftcms.jpg)### Craft Twig Cheatsheet for Visual Studio Code](https://caffeinecreations.ca/blog/craft-twig-cheatsheet-for-visual-studio-code/)

[![Git Workflow - Reflections of a solo developer Thumbnail](https://caffeinecreations.ca/uploads/blog/_680x320_crop_center-center_65_none_ns/git.png)### Git Workflow - Reflections of a solo developer](https://caffeinecreations.ca/blog/git-workflow/)