CODEWITHSUNDEEP
htmlcommentsvisual-studio-codekey-bindingscode-editor
Makis K.
Makis K.

Reputation: 1007

Visual studio code comment in HTML files

I am trying Visual Studio Code lately and i've noticed that when i try to add a line comment in an HTML file (using Ctrl+/ or Ctrl+K Ctrl+C) instead of this: <!-- -->, i get this {# #}.

In JS or CSS files the key bindings work just fine and produce the expected result.

So how can i get the proper type of comments in HTML files?

Upvotes: 33

Views: 97736

Answers (12)

F&#233;lix Paradis
F&#233;lix Paradis

Reputation: 6031

List of extensions known to cause this unwanted behavior (Based on my own experience and other answers):

  • Hugo Language and Syntax Support
  • Djaneiro
  • Nunjucks
  • Tornado
  • Sublime Babel
  • Babel
  • Twig
  • Django by Baptiste Darthenay (v1.0.0)
  • Tera template formatter
  • Livewire Language Support by cierra
  • (Feel free to edit this answer and add yours)

You may need to restart code after disabling your extension (I did).

Upvotes: 16

Masoud Kameli
Masoud Kameli

Reputation: 57

You can configure the file type at the bottom right corner. you probably are on Django HTML. you can set it to HTML.

Upvotes: 0

hhillen
hhillen

Reputation: 11

For me, this was caused by the Sublime Babel extension. Disabling it and restarting VS Code fixed the issue: Cmd+K, Cmd+C works again, as does Cmd+/ for toggling. Also, HTML comment blocks are now correctly styled again.

Upvotes: 0

Todd V.
Todd V.

Reputation: 11

For others having the problem, the Tornado extension is also a culprit. I had to "disable (workspace)" one by one to find it.

Upvotes: 1

Swapnil G Thaware
Swapnil G Thaware

Reputation: 877

In your Visual Studio Code windows, go to File->Preferences->Keyboard Shortcut

This will open two files beside each other like in the screenshot below:

enter image description here

here you can change or create your own shortcuts. Like I just replaced Ctrl+KU to Ctrl+/

Hope this will work for you !!

Upvotes: 3

Mohammed Osman
Mohammed Osman

Reputation: 4236

Click (Ctrl + K C) to comment the html. Click (Ctrl + K U) to uncomment html.

Upvotes: 0

Cengkuru Michael
Cengkuru Michael

Reputation: 4780

Try uninstalling any python extension packs you may have installed! You can then reinstall the python extension you need individually.

Chances are one of the extensions in the bundle of that extension pack is causing the issue

Upvotes: 0

Pawn
Pawn

Reputation: 161

For me, the offending extension was Nunjucks (the templating language plugin assumes every .html file is a nunjucks html template)

Upvotes: 1

Ahmed Elkoussy
Ahmed Elkoussy

Reputation: 8568

For me, it was the (Djaneiro) extension, it made the html files default to django template, so it caused the comments to be wrong in HTML (when pressing ctrl + / ) (commenting them with {% comment %})

Upvotes: 6

Lucas Vi&#241;als
Lucas Vi&#241;als

Reputation: 71

If you don't want to disable/uninstall any plugin, you can create a snippet to put a comment. For example, I create a snippet that add HTML comments in a PHP file:

    "comment HTML": {
      "prefix": "chtml",
      "body": ["<!-- $1 -->"],
      "description": "Comment HTML line"
    }

You can insert that right after the comment in File > Preferences > User Snippets > {YourExtension}

Then, when you start typing 'chtml' in that kind of files, IntelliSense will prompt that snippet.

Maybe this is a workarround, but it works excellent for me. Hope it helps!

https://code.visualstudio.com/docs/customization/userdefinedsnippets

Upvotes: 6

Makis K.
Makis K.

Reputation: 1007

Finally i found what the problem was. I had installed the twig plugin (for the Twig php template engine) and that was causing the comments issue.

Upvotes: 40

user3679671
user3679671

Reputation: 59

I've just installing VSCode 1.1.1 and try to put a comment in an new html file To do so, your new file must be,first, save in .html format and after that, you can use CTRL-K CTRL-C to put a comment and it works.

Hope that help you

Upvotes: 5

Related Questions