Горячие клавиши Visual Studio Code

Автор: Трубицин Вячеслав Александрович

VS Code

Visual Studio Code — не просто редактор, а полноценная IDE (интегрированная среда разрабоки), и владение его инструментарием способно увеличить продуктивность в 2 раза. Разберем не только базовые сочетания, но и малоизвестные лайфхаки.

Навигация: Как перемещаться со скоростью мысли

1. Космическая навигация

  • Ctrl+P / Cmd+P → Позволяет перемещаться между файлами без необходимости их поиска в многочисленных разделах вашего проекта
Дополнительно:

Введите символ # в начале поисковой строки, чтобы найти методы внутри файлов

Пример: #loginUser сразу найдет функцию во всем проекте

  • Ctrl+Shift+M — Открывает панель ошибок и предупреждений.
  • Ctrl+Tab — Переключение между последними файлами. Удерживайте ctrl и выбирайте файл по нажатию tab, либо нажмите быстро и вернитесь на предыдущий файл.
  • Ctrl+F - Поиск текста в файле и перемещение между несколькими вхождениями этого текста.

2. Точные прыжки

  • Ctrl+G / Cmd+P → :15 Переход к строке 15. При вводе сразу переносит пользователя к строке.

Редактирование: Магия преображения кода

3. Мультикурсорное волшебство

  • Alt+Click (ЛКМ) — Создание множественного курсора. Работа с несколькими строками одновременно.
  • Ctrl+Alt+↑/↓ (Win) / Cmd+Option+↑/↓ (Mac) — Добавить курсор выше/ниже.
  • Shift+Ctrl+L — Выделить все вхождения текущего текста в файле.
  • Ctrl+D — Выделить вхождение текущего текста ниже.
# Shift+Ctrl+L на price
price = 10
total_price = price * quantity  # Изменится сразу во всех местах
discount_price = price * 0.9

4. Взаимодействие с текстом

  • Ctrl+/ — Закоментировать/Раскоментировать текст
  • Ctrl+Z — Отменить недавнее действие. Отменить отменение нельзя.
  • Ctrl+X — Вырезать строку или выбранный текст.
  • Ctrl+C — Скопировать строку или выбранный текст.
  • Ctrl+V — Вставить текст из буфера.

Если установлен пакет или расширение на стантартизацию оформления кода, то сочетанием клавиш Shift+Alt+F выбранные строки будут соответствовать требованиям оформления.

Управление интерфейсом: Архитектура рабочего пространства

5. Расширенное зонирование

  • Ctrl+ — Приблизить.
  • Ctrl- — Отдалить.
  • Ctrl+B — Скрыть/показать боковую панель.
[Левый редактор]  [Правый редактор]
frontend/          backend/
index.html         server.py
styles.css         config.yaml

6. Группы вкладок

Перенесите вкладку в правую часть VS Code для создания второй группы вкладок либо воспользуйтесь Ctrl+2 и перенесите во вторую группу нужный файл.

  • Ctrl+1 / Ctrl+2 … — Быстрое переключение между группами.
  • Ctrl+K+W — Закрыть все вкладки группы.

Продвинутые техники: Вы за гранью

7. Консоль VS

Консоль Visual Studio Code открывает огромный функционал IDE, выделю наиболее используемые возможности

  • Сtrl+Shift+P — Открыть консоль VS Code
  • >Reload Window — Перезагружает VS Code. Бывает полезно при зависаниях IDE (после установки, включения, отключения расширений).
  • >Git: Commit — Взаимодействие с репозиторием через VS Code.
  • >Color Theme — Выбор оформления VS Code.

8. Создание собственных снипетов

При частой работе с одним и темже стеком часто возникают случаи повторения паттернов кода. Для таких случаев в VS Code есть снипеты. Они позволяют забиндить на пользовательскую фразу (слово) целый массив кода. При вводе этой фразы VS Code подскажет выбрать её и развернет весь вложенный блок кода.

Создать снипеты можно перейдя в File > Preferences > Configure Snippets > New Global Snippets File > Введите название снипета Пример:

{
	"Vue setup conf": {
		"prefix": "vuesetup",
		"body": [
			"<template>\n\t<div class='${1:wrapper}'>\n\n\t</div>\n</template>\n\n<script setup>\nimport { $2 } from 'vue'\n\n</script>\n\n<style scoped>\n\n</style>"
		],
		"description": "template script-setup style-scoped"
	}
}

Vue setup conf - название снипета, prefix - вызывает сниппет в коде, body - тело снипета (какой текст развернется), description - описание снипета.

Сниппеты позволяют использовать внутри тела условия ${if} ${else} и точки быстрого редактирования $1 и $2 (переключаться между ними с помощью tab)

Итог

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

Статистика эффективности

Действие С мышью С клавиатурой Поиск файла 8 сек 1.5 сек Навигация к ошибке 12 сек 1 сек Поиск переменной 20 сек 5 сек

Pro Tip: Настройте свои сочетания через File > Preferences > Keyboard Shortcuts. Например, привяжите Ctrl+S к комбинации “Сохранить + Форматировать”.

Как превратить команды в мышечную память

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

Упражнение: преобразуйте код используя:

// 1. Измените везде название переменной ddta на data
// 2. Закоментируйте последнюю строчку
// 3. Приведите код к требованиям оформления

const ddta = [1, 2, 3];
let total = 0;
for (let i = 0; i < ddta.length; i++) {
    total += ddta[i];
}
console.log(total);
Трубицин Вячеслав Александрович

Трубицин Вячеслав Александрович