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

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 для начинающего джуна

«Поговорим не про Vim», олдам, сеньорам и тру-си-разработчикам на проверку: пользуетесь ли вы такими сочетаниями VS Code? Если же вы только начинаете программировать, влетаете в айти на реактивном самолете курсов по Питону, или просто не знаете ничего про хоткеи VS Code, возможно вам точно пригодится парочка сочетаний 🙂

Все сочетания описаны для VS Code на Windows
↓ / ↑ / ← / → — стрелки вниз, вниз и т.д.
ЛКМ / ПКМ / СКМ — левая, правая, средняя кнопки мышки соответственно.

Shift + Tab — сместить табуляцию на один шаг влево. Если вы пишете на Python, то табуляция или четыре пробела — ваш неизменный спутник. Но мало кто знает, что достаточно поставить курсор в любое место строки, нажать Shift + Tab и вуаля, вся строка смещается влево на «один таб».

Ctrl + / — закомментировать или раскомментировать строку. VS Code сам разберется, какой язык программирования вы используете, и в начале строки установит или удалит необходимый символ для комментария. Место, где находится курсор на строке неважно.

Shift + Del — удалить строку целиком. Теперь не нужно выделять мышкой всю строку и потом нажимать Backspace. Не нужно выделять всю строку. Правда!

Alt + ↑ / ↓ — перемещение строки с курсором вверх или вниз. Просто попробуйте и ощутите, насколько это удобно. Знаете шутку «стоит всего один раз зимой надеть подштанники, и ты уже не можешь остановиться»? Так вот стоит только один раз переместить так строку, и вы уже не сможете по-другому!

Shift + Alt + ↓ / ↑ — дублирование строки с курсором вниз. В зависимости от ↓ или ↑ курсор останется на текущей или новой строке. Теперь можно обойтись без Ctrl + C, хотя нет, нельзя =)

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

F12 или Alt + ЛКМ на переменной — перейти к переменной или родительскому классу. Часто рассказывают про PyCharm, будто только он умеет проваливаться в родительские классы, чтобы посмотреть, какие его атрибуты мы можем переопределять, наследуясь от него; но так умеет и VS Code.

Ctrl + D — выделяет слово, на котором находится курсор. Следующее нажатие на D (удерживая Ctrl) выделить следующее по порядку вниз идентичное значение. Вот пишете вы функцию, и вам нужно выделить ближайшие значения ‘name’. Легко! Выделить все вхождения слова можно вот так — Ctrl + F2. Радует то, что курсор оказывается в конце каждого выделенного значения и сразу можно редактировать!

Ctrl + L — выделяет всю строку. Целиком. Теперь копипастить еще проще, не правда ли? =)

Ctrl + Alt + → — разделить рабочую область и переместить актуальную вкладку вправо. Ctrl + Alt + ← возвращает вкладку назад. Вы не поверите, насколько удобно видеть, например, models.py и views.py рядом.

А теперь неочевидные, но потрясающие возможности. Меню → Файл → Настройки → Сочетания клавиш (Ctrl + K + Ctrl + S), в строке поиска вводим необходимый параметр и кликаем по результату мышкой, после нажимаем нужные клавиши для установки пользовательской настройки и наслаждаемся. Команды, которые точно стоит попробовать:

editor.action.jumpToBracket — переход к парной скобке, у меня установлено на Ctrl + Q. Сначала переход к ближайшей скобке, а следующее нажатие перемещает вас к парной скобке и так далее. Часто нам нужно оказаться либо в начале скобок, либо в конце. А кликать мышкой или стрелками не всегда удобно. Теперь достаточно одного нажатия и вы у нужной скобки.

editor.action.selectToBracket — выделить все внутри ближайших скобок и сами скобки, у меня это Ctrl + Shift + Q. Сколько кликов мышкой, сколько ошибок, выделяя внутри скобок мышкой или Shift + стрелки. А теперь можно просто одним нажатием выделить все точно и быстро.

Буду благодарен за любые интересные и полезные хоткеи, пишите в комментариях, что понравилось из моих, и что вы используете сами?

P. S. В комментариях рассказали про логичную, но неочевидную возможность IDE-шек и иже с ними: чтобы вырезать или скопировать строку, необязательно выделять ее целиком, можно просто переместить курсор на неё. ❤️

Подборка самых полезных горячих клавиш для различных IDE и редакторов кода

Хорошему программисту нужны хорошие инструменты для работы. Однако самих инструментов мало — нужно ещё владеть ими на должном уровне. Комбинация клавиш Ctrl+C Ctrl+V — незаменимый спутник каждого разработчика, однако в средах разработки есть гораздо больше полезных горячих клавиш, существенно повышающих продуктивность. Мы собрали для вас подборку полезных горячих клавиш для некоторых популярных IDE, чтобы вы могли похвастаться перед коллегами своими мега-скиллами разработки.

IntelliJ IDEA

IntelliJ IDEA — известная IDE от JetBrains для JVM-языков вроде Java, Scala и Kotlin. Укомплектована уникальными инструментами и позволяет без проблем ориентироваться в программе. Есть и другие IDE от тех же разработчиков, например, PyCharm для Python, WebStorm для JavaScript и не только. Они во многом схожи между собой, поэтому большинство из нижеуказанных горячих клавиш должно работать и в других IDE от JetBrains.

• Ctrl + Space — стандартное автодополнение кода;
• Ctrl + Shift + Space — умное автодополнение кода;
• Двойной Shift — искать везде;
• Alt + Enter — показать возможные варианты исправления;
• Alt + Ins — генерация кода (геттеры, сеттеры, конструктор и т.д.);
• Ctrl + P — информация о параметре (применяется на аргументе метода при вызове);
• Ctrl + W — расширить область выделения;
• Ctrl + Shift + W — уменьшить область выделения;
• Ctrl + E — список недавних файлов;
• Shift + F6 — переименовать (переменную, функцию и т.д.);
• Ctrl + R — сделать замену;
• Ctrl + Q — быстрый просмотр документации;
• Ctrl + / — закомментировать/раскомментировать строку;
• Ctrl + Shift + / — закомментировать/раскомментировать блок кода;
• Ctrl + Alt + I — автоматически добавить нужные отступы для строки/строк;
• Ctrl + Shift + A — найти действие;
• Shift + Alt + ↑ — переместить выбранные строки вверх;
• Shift + Alt + ↓ — переместить выбранные строки вниз;
• Ctrl + Shift + F7 — показать все упоминания в файле;
• Ctrl + Alt + L — реформатировать код.

Eclipse

Если вы близки с open-source сообществом, то вы наверняка слышали об Eclipse. Будучи доступным для Linux, Windows и OS X, Eclipse де-факто является open-source IDE для разработки на Java. Существует множество расширений и аддонов, которые делают Eclipse полезным для разного рода задач и разработки на отличных от Java языках программирования вроде Python.

• Ctrl + 1 — быстрое исправление;
• Ctrl + Alt + R — переименовать;
• Ctrl + / — закомментировать/раскомментировать строку;
• Ctrl + Shift + / — закомментировать/раскомментировать блок кода;
• Alt + ↑ — переместить выбранные строки вверх;
• Alt + ↓ — переместить выбранные строки вниз;
• Ctrl + I — исправить отступы;
• Ctrl + Alt + U — показать все упоминания в файле;
• Ctrl + Q — перейти к последнему месту редактирования;
• Shift + Ctrl + X — привести текст к верхнему регистру;
• Shift + Ctrl + Y — привести текст к нижнему регистру;
• Ctrl + Shift + F — реформатировать код;
• Ctrl + Shift + O — автоматически вставить нужные импорты.

Visual Studio 2017

Visual Studio — полнофункциональная IDE от Microsoft, которая во многом сопоставима с Eclipse. Доступная на Windows и Mac OS, Visual Studio представлена как в бесплатном (Community), так и в платном (Professional и Enterprise) вариантах. Visual Studio позволяет разрабатывать приложения для разных платформ и предоставляет свой собственный набор расширений.

• F12 — перейти к определению(класса,метода и т.д.);
• Ctrl + Shift + L — поставить закладку;
• Ctrl + K Ctrl + W — открыть окно закладок;
• Ctrl + Shift + U — привести текст к верхнему регистру;
• Ctrl + U — привести текст к нижнему регистру;
• Ctrl + Shift + V или Ctrl + Shift + Ins — вставить один из 10 последних фрагментов текста, скопированных в буфер обмена;
• Ctrl + K Ctrl + C — закомментировать блок кода;
• Ctrl + K Ctrl + U — раскомментировать блок кода;
• Ctrl + K Ctrl + D — отформатировать весь документ;
• Ctrl + K Ctrl + F — отформатировать выбранный текст;
• Ctrl + K Ctrl + S — обернуть в конструкцию (if-else, цикл for и т.д.);
• Ctrl + ] — когда курсор установлен на скобку, регион, многострочный комментарий или строку, эта комбинация позволит увидеть начало и конец этого блока;
• Ctrl + M Ctrl + O — свернуть все функции;

Доступный на всех платформах Atom называют «хакабельным текстовым редактором 21 века». Atom написан с использованием Electron — фреймворка для создания кроссплатформенных приложений для десктопа средствами JavaScript, HTML и CSS — и имеет множество расширений.

• Ctrl + Shift + L — выбрать язык файла;
• Ctrl + Shift + D — копирует строку, на которой находится курсор, под неё же;
• Ctrl + Shift + K — удалить строку;
• Ctrl + ↑ — переместить выбранные строки вверх;
• Ctrl + ↓ — переместить выбранные строки вниз;
• Ctrl + R — открывает список со всеми символами (функциями) в текущем файле для быстрого перехода;
• Alt + F3 — выбрать все одинаковые слова;
• Ctrl + ЛКМ — множественные курсоры;
• Ctrl + J — соединить строки;
• Ctrl + [ — убрать отступы для выделенных строк;
• Ctrl +] — добавить отступы для выделенных строк.

Visual Studio Code

Visual Studio Code (не путать с Visual Studio) — полнофункциональный редактор кода, доступный на Windows, Linux и Mac OS X. VS Code является расширяемым open-source редактором, который можно настроить под любую задачу. Как и Atom, VS Code построен на Electron, поэтому у него есть те же преимущества и недостатки.

• F2 — переименовать символ (функцию, переменную и т.д.);
• Ctrl + Shift + O — перейти к символу;
• Ctrl + K Z — перейти в режим Дзен, в котором вас не отвлекают лишние детали;
• Ctrl + / — закомментировать/раскомментировать строку;
• Shift + Alt + A — закомментировать/раскомментировать блок кода;
• Ctrl + Shift + [ — свернуть область;
• Ctrl + Shift + ] — развернуть область;
• Ctrl + H — заменить;
• Shift + F12 — показать все упоминания;
• F12 — открыть определение (функции, класса и т.д.);
• Ctrl + K F12 — открыть определение в другой части экрана;
• Ctrl + K M — изменить язык файла;
• Ctrl + P — быстро открыть файл;
• Ctrl + \ — разделить экран;
• Ctrl + ` — открыть встроенный терминал;
• Ctrl + K Ctrl + S — показать список всех горячих клавиш.

Sublime Text

Sublime Text, написанный инженером из Google с мечтой о лучшем текстовом редакторе, является весьма популярным редактором кода. Доступный на всех платформах, Sublime Text имеет встроенную поддержку редактирования кода на разных языках, а также богатый набор расширений, называемых пакетами, которые расширяют возможности синтаксиса и редактирования.

Как закомментировать кусок кода в VS Code?

Недавно перешёл на этот редактор кода и возникают проблемы с комментированием: раньше работал в Sublime, там всё решалось выделением необходимого куска кода и сочетанием клавиш Ctrl+Shift+/.

Ответы (3 шт):

Ctrl + / — закомментировать / раскомментировать.

shift + alt + a закомментировать

VSCod автоматически определяет какого вида комментарий создать:

• HTML — вот в таком виде: <!—данные—>
• CSS — вот в таком виде: /*данные*/

В другом виде, типа "//" и ещё варианты у меня не срабатывают (может кто подскажет).