Ускорьте написание кода с помощью этих горячих клавиш
Каждый раз, когда вы тянетесь к мыши, чтобы открыть файл, кликнуть по меню или запустить поиск, вы прерываете свою концентрацию. Эти небольшие прерывания накапливаются. Хорошая новость: несколько правильно подобранных горячих клавиш для разработчиков могут устранить большинство из них, не требуя от вас запоминания сотни комбинаций.
Эта статья сосредоточена на наиболее эффективных горячих клавишах, сгруппированных по рабочим процессам — охватывая VS Code и инструменты разработчика браузера (DevTools). Все сочетания клавиш указаны в формате Windows/Linux | macOS. Обратите внимание, что горячие клавиши могут различаться в зависимости от версии редактора, ОС и пользовательских настроек, поэтому проверяйте их в своей собственной конфигурации, если что-то работает не так, как ожидалось.
Ключевые выводы
- Небольшой набор целевых горячих клавиш может значительно снизить зависимость от мыши и удерживать вас в потоке работы.
- Навигация, редактирование, поиск и отладка — каждая из этих областей имеет несколько высокоэффективных сочетаний клавиш, которые стоит изучить в первую очередь.
- Многокурсорное редактирование и переименование символов (
F2) — одни из самых экономящих время функций в VS Code. - Горячие клавиши могут различаться в разных редакторах, версиях ОС и пользовательских привязках клавиш — всегда проверяйте их в своей собственной конфигурации.
Навигация: перемещение по коду без использования мыши
Эти горячие клавиши VS Code обрабатывают наиболее распространенные задачи навигации:
| Действие | Windows/Linux | macOS |
|---|---|---|
| Быстрое открытие файла по имени | Ctrl+P | Cmd+P |
| Переход к определению | F12 | F12 |
| Возврат к предыдущему местоположению | Alt+← | Ctrl+- |
| Переход к символу в файле | Ctrl+Shift+O | Cmd+Shift+O |
| Открыть палитру команд | Ctrl+Shift+P | Cmd+Shift+P |
Одна только комбинация Ctrl+P / Cmd+P заменяет большую часть навигации по боковой панели. Введите часть имени файла и откройте его мгновенно. Объедините её с F12 для перехода к определению, затем Alt+← / Ctrl+- для возврата — мышь не требуется.
Редактирование: пишите и изменяйте код быстрее
Эти горячие клавиши для повышения продуктивности кодирования обрабатывают повторяющиеся манипуляции с текстом, которые вас замедляют:
- Переключить комментарий строки:
Ctrl+//Cmd+/— работает на текущей строке или выделенном фрагменте. - Переместить строку вверх/вниз:
Alt+↑/Option+↑иAlt+↓/Option+↓— изменяйте порядок логики без вырезания и вставки. - Дублировать строку:
Shift+Alt+↓/Shift+Option+↓— копирует текущую строку непосредственно ниже. - Удалить строку:
Ctrl+Shift+K/Cmd+Shift+K. - Многокурсорный режим:
Alt+Click/Option+Click— размещайте дополнительные курсоры, затем печатайте для одновременного редактирования всех позиций.
Многокурсорное редактирование особенно полезно при переименовании повторяющихся переменных или добавлении одного и того же текста в несколько строк одновременно.
Поиск и рефакторинг: изменение кода в нескольких файлах
| Действие | Windows/Linux | macOS |
|---|---|---|
| Поиск внутри файла | Ctrl+F | Cmd+F |
| Поиск по всему проекту | Ctrl+Shift+F | Cmd+Shift+F |
| Замена в файле | Ctrl+H | Option+Cmd+F |
| Переименовать символ (все ссылки) | F2 | F2 |
| Выбрать все вхождения слова | Ctrl+Shift+L | Cmd+Shift+L |
F2 — самый чистый способ переименовать переменную или функцию. Он автоматически обновляет каждую ссылку в области видимости — безопаснее и быстрее, чем ручной поиск и замена.
Discover how at OpenReplay.com.
Отладка: горячие клавиши DevTools, которые имеют значение
Независимо от того, отлаживаете ли вы в VS Code или в инструментах разработчика браузера, эти горячие клавиши охватывают основной рабочий процесс:
- Переключить точку останова:
F9(VS Code). - Запустить / продолжить:
F5. - Шаг с обходом:
F10. - Шаг с заходом:
F11. - Шаг с выходом:
Shift+F11.
В Chrome DevTools откройте панель с помощью F12 или Ctrl+Shift+I / Cmd+Option+I. Внутри Ctrl+P / Cmd+P открывает выбор файла — та же мышечная память, что и в VS Code. Вы можете изучить полный список в документации по горячим клавишам DevTools.
Примечание о горячих клавишах, которые не всегда переносятся
Несколько горячих клавиш, перечисленных в популярных руководствах, специфичны для редактора или конфликтуют с привязками на уровне ОС. Например, Ctrl+D в VS Code выбирает следующее вхождение выделенного слова — это не дублирует строку, что является распространенным заблуждением, перенесенным из других редакторов. Всегда проверяйте свои привязки клавиш через Preferences → Keyboard Shortcuts (Ctrl+K Ctrl+S / Cmd+K Cmd+S) или официальный справочник по привязкам клавиш VS Code, прежде чем предполагать настройки по умолчанию.
Заключение
Выберите пять горячих клавиш из этого списка, которые соответствуют вашим наиболее повторяющимся действиям. Используйте их исключительно в течение недели. Как только они станут автоматическими, добавьте еще пять. Оптимизация рабочего процесса разработчика через горячие клавиши — это не о запоминании всего — это об устранении конкретных точек трения, которые чаще всего прерывают ваше мышление.
Часто задаваемые вопросы
Нажмите Ctrl+P в Windows/Linux или Cmd+P в macOS, чтобы открыть диалог быстрого открытия. Начните вводить любую часть имени файла и выберите его из результатов. Это быстрее, чем навигация по боковой панели, и хорошо работает даже в больших проектах с множеством файлов.
Удерживайте Alt в Windows/Linux или Option в macOS и кликайте в каждой позиции, где вы хотите разместить курсор. Затем вы можете печатать, удалять или вставлять во всех позициях курсора одновременно. Это особенно полезно для редактирования повторяющихся шаблонов, таких как имена переменных или похожие строки кода.
F2 запускает переименование символа. В отличие от текстового поиска и замены, он понимает контекст кода и переименовывает только фактические ссылки на этот символ в пределах его области видимости. Это позволяет избежать случайных изменений несвязанного текста, который просто совпадает с той же строкой.
Не всегда. Горячие клавиши могут значительно различаться между редакторами. Например, Ctrl+D выбирает следующее вхождение в VS Code, но может дублировать строку в других редакторах. Всегда проверяйте настройки привязок клавиш вашего редактора, чтобы подтвердить, что делает каждая горячая клавиша, прежде чем полагаться на неё.
Understand every bug
Uncover frustrations, understand bugs and fix slowdowns like never before with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data. Check our GitHub repo and join the thousands of developers in our community.
