Как комментировать в visual studio code html

How to Comment in VS Code — The VSCode Comment Shortcut

This quick guide will teach you the VSCode comment shortcut and everything else you need to know about commenting in VS Code, including multi-line comments.

I don’t know of a programming language that does not support comments.

Code-comments are incredibly useful. When building out complex functionality, sometimes I’ll even write out the whole function in pseudo-code comments before writing any code.

Comments make code more readable and understandable. This is especially useful if you work on a large team with lots of people. Every comment you write could save you and your colleagues some back and forth on slack.

The other great use-case of comments is quickly disabling one or multiple lines of code. This comes in handy when debugging your program.

Comments serve two main use-cases:

• Add information that gives context to your code
• Quickly disable code while debugging

Here’s how to do both in VS Code:

Create a Comment in VSCode, the easy way.

You’ll use this mainly to add information to the flow of your program that will help your future-self and your colleagues understand what’s going on.

First, place your cursor where you’d like to add the comment. Then, use the VS Code comment shortcut that corresponds to your platform below.

• On Windows, the shortcut is: CTRL + /
• On Mac, the shortcut is: Command + /

The VSCode comment shortcut Mac is very similar to the Windows version.

Comment-out code in VSCode

This is the other main usage of comments. Commenting-out code while debugging. This is probably the most useful shortcut in here. Here’s how to do it:

1. Select the text or code that you want to comment out

1. Execute the shortcut that corresponds to your platform. (editor.action.commentLine)

• Windows: Ctrl + /
• Mac: Command + /

You can also uncomment using the same command. Select the code that is currently commented-out and execute the shortcut. It should become un-commented again.

Once you do it a few times it will become muscle memory and boost your productivity. I use this command constantly and can’t imagine not having it.

Toggling block comments in VSCode

Some programming languages support block comments. These are comments which span multiple lines of code (a block). If you want to comment out multiple lines of code within the same comment, this is what you’re looking for.

To toggle a VSCode comment block, you can use editor.action.blockComment:

• Windows: Shift + Alt + A
• Mac: Shift + Option + A

There’s one other way to comment and un-comment, but it’s not as handy.

Comment out code (editor.action.addCommentLine):

• Windows: Ctrl + K + C
• Mac: Command + K + C

Un-comment code (editor.action.removeCommentLine):

• Windows: Ctrl + K + U
• Mac: Command + K + U

The main difference with these commands is that they each only have a single purpose. They do not toggle code like the slash shortcut. So, if you keep executing (CTRL + K + C), the comments will keep piling up, as shown in the screenshot below.

The same is true for un-commenting.

Like I said, I think these commands are a lot less handy, and I don’t think there’s ever a good reason to them over the slash one. unless of course you rebound the slash shortcut to do something else.

Changing the comment key binds in VS Code

If for some reason you want to change the default key binds for commenting and uncommenting in VS Code, you can follow these steps:

Как закомментировать код

Работа в VS Code

Это краткое руководство научит вас использовать комментарии в VSCode, включая многострочные комментарии.

Я не знаю ни одного языка программирования, который бы не поддерживал комментарии.

Комментарии к коду невероятно полезны. При создании сложной функциональности я иногда даже пишу всю функцию в псевдокоде, прежде чем писать код.

Другая полезная функция — быстрое отключение одной или нескольких строк кода. Это очень удобно при отладке программы.

Комментарии служат двум основным целям:

1. Добавить информацию, которая дает контекст вашему коду;
2. Быстрое отключение кода во время отладки;

Вы будете использовать их в основном для добавления информации о вашей программы, которая поможет вашему будущему и вашим коллегам понять, что происходит.

Процесс комментирования

Сначала установите курсор в том месте, где вы хотите добавить комментарий.

Затем воспользуйтесь ярлыком комментария VS Code, который соответствует вашей платформе.

• В Windows это сочетание клавиш выглядит следующим образом: CTRL + /
• На Mac это сочетание клавиш: Command + /

Вы также можете расскомментировать код с помощью той же команды. Выберите код, который в данный момент закомментирован, и выполните команду быстрого доступа. Он снова станет незакомментированным.

Как только вы проделаете это несколько раз, это станет мышечной памятью и повысит вашу производительность. Я использую эту команду постоянно и не могу представить, что у меня ее нет.

Переключение блочных комментариев в VSCode

Некоторые языки программирования поддерживают блочные комментарии. Они охватывают несколько строк кода (блок). Если вы хотите закомментировать несколько строк кода — это то, что вам нужно.

Чтобы переключить блок комментариев VSCode, вы можете использовать editor.action.blockComment:

• Windows: Shift + Alt + A
• Mac: Shift + Option + A

Есть еще один способ комментирования и разкомментирования, но он не так удобен.

Закомментируйте код (editor.action.addCommentLine):

• Windows: Ctrl + K + C
• Mac: Command + K + CСнять комментарий с кода (editor.action.removeCommentLine):
• Windows: Ctrl + K + U
• Mac: Command + K + U

Главное отличие этих команд в том, что каждая из них имеет только одно назначение. Они не переключают код, как ярлык со слэшем. Поэтому, если вы будете продолжать выполнять (CTRL + K + C), комментарии будут продолжать накапливаться.

10 горячих клавиш VS Code, которые ускорят вашу работу

Горячие клавиши — добро, польза и экономия времени. Давайте разберёмся, как с их помощью упростить себе жизнь в Visual Studio Code.

Создать структуру документа

Это сочетание клавиш за секунду создаёт базовую структуру кода или вложенные теги.

Быстро добавить комментарий

Чтобы добавить комментарий, нужно перейти в начало строки и дописать туда два слеша. Это медленно. Быстрее нажать в любом месте строки Ctrl + / , и строка закомментируется, если она ещё не. А если уже да, то комментарий исчезнет.

Перейти к строке под номером

Windows — Ctrl + G

macOS — Control + G

Иногда отладчики внезапно сообщают, что на строке 953 случилась непоправимая инфернальная ошибка вселенной. Чтобы не выискивать вручную, не листать и не тратить на это время, нажмите Ctrl + G , введите номер строки и спокойно спасайте вселенную.

Поменять строку местами с соседними

Случается такое, что ваш алгоритм — не алгоритм. Всё пошло не так, а вместо числа 42 вывелось сообщение «Данные удалены». Кому-то для этого нужно переписать весь код, но иногда бывает достаточно поменять строки местами и всё заработает.

Alt и стрелки меняют текущую строку местами с соседними.

Дублировать строку

Windows Shift + Alt + ↓ / ↑

macOS Shift + Option + ↓ / ↑

Это для тех, кто не хочет копировать и вставлять несколько раз одно и то же.

Перейти к парной скобке

Windows Ctrl + Shift + \

macOS Shift + Command + \

Когда кода становится много, очень просто запутаться в закрывающих и открывающих скобках, непонятно, где какой блок, и вообще, что происходит. На помощь приходит Ctrl + Shift + \ — это хорошее дополнение к стандартной подсветке парных скобок в VS Code.

Переименовать переменную

Писали, писали, а старший разработчик пришёл и сказал, что ваши переменные a , b и c — дурной тон. Чтобы не выискивать их по всему документу и не менять руками, есть F2 .

Отформатировать документ

Windows — Shift + Alt + F

macOS Shift + Option + F

VS Code предложит установить расширение или выбрать из существующих, а потом красиво отформатирует документ — расставит по местам блоки и скобки, сделает строки кода читаемыми.

Перейти к переменной

Иногда вообще непонятно, откуда взялась переменная, какая у неё область видимости и где она объявлена. F12 перенесёт вас к объявлению выделенной переменной, функции или метода. Если объявление в другом файле — всё равно перенесёт.

Включить или выключить перенос слов

Windows — Alt + Z

macOS Option + Z

Если строки кода или текст не вмещаются в редактор по ширине, включите перенос.

Включить дзен-режим

Windows — Ctrl + KZ

macOS — Command + KZ

Лучшее решение для тех, кто входит в состояние потока, когда пишет код. Дзен-режим скрывает все панели, разворачивает редактор на весь экран, и вы можете плыть в волнах кода и думать только о нём. Чтобы вернуться в реальный мир, нажмите Escape .

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?

12 Answers 12

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.

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).

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

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:

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

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!