Горячие клавиши и приёмы VS Code для быстрой работы

Что даёт больше всего скорости

Не нужно учить сотню сочетаний. Почти весь выигрыш дают несколько приёмов:

• Палитра команд — любая функция редактора доступна по названию, без поиска в меню.
• Быстрая навигация — открыть файл, перейти к функции или строке, не трогая мышь.
• Мультикурсор — править несколько мест одновременно.
• Рефакторинг — переименование и автоисправления, которые понимают код, а не просто текст.
• Сниппеты и свои клавиши — повторяющиеся действия превращаются в одно нажатие.

Ниже сочетания указаны в формате Windows / macOS. На Linux они в основном совпадают с Windows.

Палитра команд и поиск файлов

Полезная деталь: в окне Ctrl+P можно набрать префикс. > превращает его в палитру команд, @ ищет символы в файле, : переходит к строке. Достаточно запомнить одно сочетание.

Навигация по коду

• F12 — перейти к определению функции или класса.
• Alt+F12 / Option+F12 — посмотреть определение во всплывающем окне, не уходя из текущего файла.
• Shift+F12 — показать все места, где используется символ.
• Alt+← / Ctrl+- — вернуться туда, где вы были до перехода.
• Ctrl+Tab — переключиться между открытыми вкладками.

Связка «F12 — прочитал — вернулся назад» заменяет ручной поиск по проекту в большинстве случаев.

Мультикурсор

Типичный сценарий: выделите имя переменной, нажмите Ctrl+D несколько раз и печатайте — изменятся все выбранные вхождения. Для прямоугольного выделения тяните мышью с зажатыми Shift+Alt (на macOS — Shift+Option).

Редактирование строк

• Alt+↑/↓ / Option+↑/↓ — переместить строку.
• Shift+Alt+↑/↓ / Shift+Option+↑/↓ — дублировать строку.
• Ctrl+Shift+K / Cmd+Shift+K — удалить строку.
• Ctrl+/ / Cmd+/ — закомментировать строку или выделение.
• Shift+Alt+F / Shift+Option+F — отформатировать документ.

Рефакторинг

• F2 — переименовать символ во всём проекте. В отличие от поиска и замены, редактор учитывает область видимости и не тронет одноимённые переменные в других местах.
• Ctrl+. / Cmd+. — быстрые исправления и рефакторинги: добавить импорт, вынести код в функцию или константу, исправить ошибку линтера.

Набор доступных рефакторингов зависит от языка и установленных расширений: для TypeScript и JavaScript он богаче из коробки, для других языков нужен соответствующий языковой плагин.

Свои сниппеты

Сниппет — шаблон, который разворачивается по короткому слову. Откройте палитру команд, введите «snippets» и выберите настройку сниппетов для нужного языка или для всего проекта.

{
  "React component": {
    "prefix": "rfc",
    "body": [
      "export function ${1:Component}() {",
      "  return <div>$0</div>;",
      "}"
    ],
    "description": "Функциональный компонент React"
  }
}

$1 — первое место для ввода, $0 — где окажется курсор в конце. Сниппеты уровня проекта лежат в папке .vscode и попадают в репозиторий, так что ими пользуется вся команда.

Свои сочетания клавиш

Редактор сочетаний открывается через Ctrl+K Ctrl+S / Cmd+K Cmd+S. Там видно, какие клавиши уже заняты. Для точной настройки откройте JSON-версию (иконка в правом верхнем углу редактора сочетаний):

[
  {
    "key": "shift+alt+d",
    "command": "editor.action.duplicateSelection",
    "when": "editorTextFocus"
  }
]

Поле when ограничивает, где работает сочетание, и помогает избежать конфликтов.

Частые ошибки

• Учить всё сразу. Возьмите 3–4 сочетания на неделю, пока они не станут привычкой.
• Искать нужное действие в меню мышью, когда оно есть в палитре команд.
• Переименовывать через поиск и замену вместо F2 — легко задеть лишнее.
• Назначать свои клавиши поверх системных сочетаний ОС.