Код #Статьи

27 ноября, 2025

Горячие клавиши в VS Code: какие использовать и зачем

Овладеваем искусством многозадачности: ускоряем работу с помощью горячих клавиш и нескольких полезных приемов.

Содержание:

Программа обучения с гарантией трудоустройства: «Специалист по веб-разработке»

Узнать больше

Горячие клавиши значительно упрощают работу разработчиков, позволяя им сэкономить время. В Visual Studio Code также предусмотрены такие комбинации. Более того, пользователи могут создавать собственные сочетания, однако для большинства, особенно для новичков, достаточно стандартных вариантов. Это особенно актуально для тех, кто сталкивается с множеством настроек и может растеряться.

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

1. Вызвать поиск

Типичная задача

Необходимо отыскать все элементы, обладающие классом link, и применить к определённым из них стилизацию, добавив параллельно новый класс.

Что делать

Для поиска нужной информации на странице используйте комбинацию клавиш Ctrl + F, если вы на Windows, или ⌘Cmd + F, если у вас macOS. После этого введите запрашиваемый текст, и вы увидите все соответствующие результаты. Далее вам останется лишь перемещаться между ними, используя стрелки навигации.

2. Оформление комментариев в коде

Ситуация

Если вам нужно добавить комментарий или временно отключить определенный фрагмент кода (например, с целью протестировать функционирование других его частей), вы можете это сделать.

Что делать

Выделите необходимый фрагмент текста и нажмите комбинацию клавиш Ctrl + /, если вы используете Windows, или ⌘Cmd + / для macOS. В случае отсутствия выделения, будет закомментирована строка, где расположен курсор, и её также можно будет раскомментировать таким же образом.

3. Переход к строке с указанным номером

Типичные ситуации

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

Что делать

Чтобы быстро перейти к нужной строке, нажмите сочетание клавиш Ctrl + G (для Windows) или ⌃Ctrl + G (для macOS), после чего введите номер строки, и вам не придётся прокручивать документ вручную.

5. Копирование строки

Ситуация

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

Что делать

Установите курсор на необходимую строку, а затем нажмите сочетание клавиш Shift + Alt + ↓ / ↑ для Windows или ⇧Shift + ⌥Option + ↓ / ↑ для macOS.

6. Приведение листинга к нужному формату

Типичная потребность

Ускорьте процесс приведения кода в порядок, чтобы он стал более организованным, понятным, эстетически привлекательным и соответствовал вашим стандартам написания кода (например, о Java-стиле можно узнать здесь).

Что делать

Нажмите комбинацию клавиш Shift и Alt вместе с F на Windows или Shift, Option и F на macOS.

Чтобы обеспечить корректное функционирование форматирования:

  • Пожалуйста, установите плагин для форматирования кода.
  • Настройте редактор, учитывая ваш стиль кодирования. Также не забудьте установить правильное значение отступов, которое обычно составляет 2 или 4 пробела.

Многообразие ввода данных

Мультикурсорность впечатляет своей функциональностью и значительно повышает скорость работы верстальщика.

Ситуация

Вам нужно было разместить одинаковую информацию в нескольких разных местах одновременно.

Для того чтобы создать копию курсора:

  • Удерживайте клавишу Alt на Windows или ⌥Option на macOS, затем щелкните левой кнопкой мыши в том месте, где хотите установить курсор.
  • Для того чтобы выделить несколько строк, нажмите и удерживайте среднюю кнопку мыши. В результате на каждой из выделенных строк будет отображаться курсор.
  • Если вам не хочется постоянно нажимать на мышь, вы можете продублировать курсор, используя комбинации клавиш: для Windows это Ctrl + Alt + ↑ / ↓, а для macOS — ⌥Option + ⌘Cmd + ↑ / ↓.

8. Многоуровневое редактирование

Ситуация

Необходимо произвести изменения в одном и том же коде одновременно в нескольких локациях.

Что делать

Выделите нужные символы с помощью мыши и используйте сочетание клавиш Ctrl + D на Windows или ⌘Cmd + D на macOS. При многократном нажатии добавится еще одно совпадение выделенного фрагмента, находящееся дальше в тексте. После этого вы сможете одновременно редактировать все выделенные участки, которые будут выделены синим цветом.

9. Аббревиатуры для тегов и характеристик

Как это работает

При вводе одного или двух символов автоподстановка начинает предлагать название тега HTML (вместе с закрывающим тегом) или название свойства CSS. Подождите, пока редактор выделит предложенный вариант (если доступно несколько вариантов, выберите тот, который вам необходим), а затем нажмите Tab или Enter.

Здесь представлены все имеющиеся сокращения. По мере того как вы будете их запоминать, ваши умения и быстрота выполнения задач будут увеличиваться, и, поверьте, это принесет немалую радость.

10. Сокращенные формы для многострочных выражений

Зачем нужно

Для ускорения процесса формирования структур, состоящих из взаимосвязанных тегов.

К примеру, требуется сформировать ненумерованный список, состоящий из четырех элементов. В каждом из этих элементов должна находиться ссылка, относящаяся к классу link. И всё это нужно сделать очень оперативно.

Что делать

Просто введите ul>li*4>a.link, дождитесь, пока этот вариант будет выделен (он единственный в выпадающем списке), и нажмите Tab или Enter. Редактор автоматически вставит полную структуру. Этот прием значительно ускоряет процесс работы, хотя в начале может показаться чем-то удивительным.

11. Активируем терминал

Трудно вообразить полноценный процесс работы в VS Code без использования терминала.

Ситуация

Необходимо открыть терминал, который упростит процесс поиска ошибок в коде (уведомления будут отображаться в разделе Проблемы), а также позволит удобно взаимодействовать с Git, системой распределённого управления версиями.

Что делать

Для пользователей Windows следует нажать комбинацию клавиш Ctrl + `, а для пользователей macOS — сочетание ⌃Ctrl + `.

Подытожим

Запомнить горячие клавиши довольно просто, если начать их использовать. Полные перечни сочетаний можно найти здесь и здесь, а сокращения представлены вот по этой ссылке.

Надеемся, что ваша работа в VS Code будет легкой и приятной!

Веб-разработчик

Узнать подробнее