Visual studio code comment in HTML files

Question

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?

for me, the offender is Jinja syntax support took me a while to do the trial-err — trivita, Mar 12 '20 at 11:20

score 33 · Accepted Answer · answered May 27 '16 at 22:06

33

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.

answered May 27 '16 at 22:06

Makis K.

877
2
9
16

I was getting crazy about this! Thanks! – adripanico Jun 20 '16 at 10:32
Thanks :) If you need Twig support, install this extension instead: https://marketplace.visualstudio.com/items?itemName=whatwedo.twig#overview – Daniel Tonon Oct 17 '18 at 00:13
Or maybe this one, it looks like it has more features: https://marketplace.visualstudio.com/items?itemName=mblode.twig-language-2 – Daniel Tonon Oct 17 '18 at 00:14
1

I confirm. The problem is with the Twig Language 0.9.0 extension. Use https://marketplace.visualstudio.com/items?itemName=whatwedo.twig#overview and/or https://marketplace.visualstudio.com/items?itemName=mblode.twig-language-2 instead. – tonix Mar 22 '20 at 10:08
This was the issue for me i disabled it , Thanks @tonix – mevr Apr 25 '22 at 06:09
It was the same for me. Just remove any Twig extrension and you're done! Thanks – Boris EKUE-HETTAH Sep 09 '22 at 10:12

score 10 · Answer 2 · edited Mar 24 '23 at 23:20

10

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
(Feel free to edit this answer and add yours)

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

edited Mar 24 '23 at 23:20

Shahzad

3
3

answered Jun 30 '20 at 18:53

Félix Paradis

5,165
6
40
49

1

Jinja (by wholroyd) breaks the commenting ability with ctrl + / when inside embedded css. – Mindaugas Bernatavičius May 15 '21 at 13:54
Thank you! I uninstalled Django extensions but didn't realise I had Hugo installed! – nikhilweee Apr 09 '23 at 18:06

score 6 · Answer 3 · answered May 19 '16 at 07:27

6

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

answered May 19 '16 at 07:27

user3679671

61
1

Well i installed the latest version of VSCode 1.1.1 on a new machine and the comments work as expected. But i still have the issue on my other pc (same version 1.1.1 but got it from updates). I think that's maybe a configuration that instead of returns {# #} for HTML files and i want to find that and change it. Or else i 'll try to uninstall and reinstall. – Makis K. May 20 '16 at 08:12

score 6 · Answer 4 · answered Aug 11 '16 at 15:22

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

Ahmed Elkoussy · Answer 5 · 2018-04-08T10:24:24.563

6

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 %})

edited Apr 08 '18 at 10:24

answered Apr 07 '18 at 17:20

Ahmed Elkoussy

8,162
10
60
85

score 4 · Answer 6 · answered Feb 13 '19 at 14:06

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:

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

Hope this will work for you !!

score 1 · Answer 7 · answered Jun 27 '18 at 13:16

1

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

answered Jun 27 '18 at 13:16

Pawn

161
2
4

score 1 · Answer 8 · answered Jul 22 '19 at 14:50

1

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

answered Jul 22 '19 at 14:50

Todd V.

11
3

score 0 · Answer 9 · answered Oct 13 '18 at 13:01

0

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

answered Oct 13 '18 at 13:01

Cengkuru Michael

4,590
1
33
33

score 0 · Answer 10 · answered Oct 25 '18 at 09:40

0

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

answered Oct 25 '18 at 09:40

Mohammed Osman

3,688
2
27
25

that was not the question dude – perhelion Dec 11 '20 at 12:49

score 0 · Answer 11 · answered Nov 10 '19 at 23:00

0

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.

answered Nov 10 '19 at 23:00

hhillen

11
3

score 0 · Answer 12 · answered Nov 30 '21 at 15:07

0

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

answered Nov 30 '21 at 15:07

Masoud Kameli

59
5

Visual studio code comment in HTML files

12 Answers12

Linked