Горячие клавиши в Sublime Text: зачем нужны и какие бывают
Настоящие профи пишут код, не отрывая пальцы от клавиатуры. Попробуйте и вы.
![](https://248006.selcdn.ru/main/iblock/b5a/b5a9afdcd6e328804410e025de3bcbc3/2cb5d68069a167b3a65e526dbb3324c4.png)
![](https://248006.selcdn.ru/main/iblock/b5a/b5a9afdcd6e328804410e025de3bcbc3/2cb5d68069a167b3a65e526dbb3324c4.png)
Иллюстрация: Оля Ежак для Skillbox Media
Когда разработчику нужно быстро написать или проверить код, он использует Sublime Text. А если скорости нужно ещё больше, он изучает горячие клавиши и становится многоруким чародеем, способным в два счёта обработать любой код, почти не касаясь мыши. Как этого достичь и какие хоткеи стоит взять на вооружение — разбираемся в этой статье.
1. Закомментировать код
Зачем нужно
- Отключить какой-то участок кода и посмотреть, как программа работает без него. Полезно при тестировании и отладке.
- Запустить программу, даже если какая-то функция ещё не готова.
Куда нажимать
Поставьте курсор напротив нужной строки или выделите фрагмент кода, а потом нажмите горячие клавиши Ctrl + / (для macOS: ⌘Cmd + /).
![](/upload/setka_images/09003825072022_f8e2668d468d0a83016bd9d8a261b330ff850882.gif)
2. Перейти к строке по номеру
Ситуация
Допустим, вы запускаете код в консоли браузера. Встроенный интерпретатор его проверяет и говорит: «В таком-то файле и в такой-то строке есть ошибка». Если проект небольшой, проблемную строку можно найти и поправить за две минуты. Но если в программе тысяча строк кода, придётся долго скроллить файл, чтобы добраться до нужного места. Что делать?
Решение
- Нажимаем горячие клавиши Ctrl + G (и в macOS, и в Windows).
- Вводим номер нужной строки.
- Переходим к проблеме и устраняем её.
![](/upload/setka_images/09010325072022_7e362904b7d857173ea1dbafb405ab1977cbbb2a.gif)
Источник: Skillbox Media
3. Множественный ввод
Ситуация
Вы решили написать один и тот же текст сразу в нескольких строках. Например, в вашем HTML-файле есть 25 тегов p, и для каждого нужно задать новые атрибуты: выровнять текст по центру, перекрасить в зелёный цвет, изменить начертание. Можно прописать атрибуты вручную 25 раз, но на это уйдёт много времени.
Решение
В Sublime Text можно «разделить» курсор и отредактировать сразу несколько строк одновременно. Есть два способа:
- Точный. Зажимаем Ctrl и кликаем левой кнопкой мыши по каждой строке, куда нужно внести изменения.
- Быстрый. Зажимаем среднюю кнопку мыши (колёсико) и выделяем нужные строки — в каждой из них появится курсор.
![](/upload/setka_images/09014325072022_b1f5fb33da8f50f319a53de56ac6374150b960ea.gif)
Источник: Skillbox Media
4. Множественное редактирование
Ситуация
Вы разбираете код коллеги и видите там функцию с названием в духе «overTherainbow». Звучит красиво, но на деле непонятно, зачем эта функция нужна, как работает и что возвращает. В таких случаях название нужно однозначно менять — причём сразу везде, иначе код перестанет работать.
Решение
- Выделяем слово, которое нужно заменить.
- Нажимаем Alt + F3 в Windows или ⌘Cmd + Ctrl + G в macOS.
- Напротив каждого такого слова в коде появится курсор: теперь можно стереть или добавить какие-то буквы, а то и вообще написать всё заново.
![](/upload/setka_images/09022725072022_9f4177150537e15f4549b4114125e7b7fd1ba2c4.gif)
Источник: Skillbox Media
5. Запустить мультиоконный режим
Главная фишка Sublime Text — многозадачность. В соседних вкладках можно открыть много разных проектов и работать над ними параллельно. Кроме того, каждую вкладку можно поделить на несколько экранов и разложить всё перед глазами, как на столе у хирурга :)
Экран в Sublime Text можно разделить так:
- Вертикально (на 2–4 столбца) — Shift + Alt + 2–4.
- Горизонтально (на 2–3 строки) — Shift + Alt + 8–9.
- Табличкой (плитками 2 × 2) — Shift + Alt + 5.
- Вернуть всё как было — Shift + Alt + 1.
Для macOS сочетания горячих клавиш те же, но вместо Shift нажимаем ⌘Cmd.
![](/upload/setka_images/09025525072022_08b05e7a793ee96c87ad6538ed513e45f4ce5704.gif)
6. Поменять строки местами
Ситуация
Нужно поменять очерёдность событий в скрипте или переместить переменную из одного блока в другой.
Как сделать
- Стрелочками (для обеих систем) — выделяем строку и двигаем её кнопками Shift + Ctrl + ↑↓ в Windows или ⌘Cmd + Ctrl + ↑↓ в macOS.
- Удобными свопами (только для Windows) — выделяем нужные фрагменты кода, а потом нажимаем Ctrl + T. Строки будут меняться местами, как мячи в руках жонглёра.
![](/upload/setka_images/09040425072022_5a1bba1c28b4a49e108d429d2577500dc235af18.gif)
7. Дублировать строки без Ctrl + C, Ctrl + V
Если вы уже работали в команде разработки, то могли слышать от опытных коллег: «Дублирование кода — зло, не делай так». В Computer Science даже есть такой принцип — don’t repeat yourself (сокращённо DRY). Но, как говорят мудрецы, если очень хочется — то можно. Поэтому держите инструкцию:
- Выделяем фрагмент, который хотим дублировать.
- Нажимаем клавиши Ctrl + Shift + D в Windows или ⌘Cmd + Shift + D в macOS.
- Создаём столько копий, сколько нужно.
![](/upload/setka_images/09042925072022_3cd9ef3440d95f4bb61a3e415a1c8e825d3ce05e.gif)
8. Открыть буфер обмена
У программистов так бывает: скопировал строку, по дороге отвлёкся, ещё что-то скопировал, потом ещё — и уже не помнишь, что и куда хотел вставить. Чтобы такого не было, Sublime Text сохраняет в буфер обмена 15 последних копий, которые вы сделали в документе.
Вот как их оттуда достать:
- Зажимаем Ctrl + K + V (для macOS — ⌘Cmd + K + V).
- Выбираем из списка нужную строку.
- Левой кнопкой мыши ставим её куда надо.
![](/upload/setka_images/09045325072022_67577da4d8977ebae7bbc26fe09eaca85147b425.gif)
9. Обернуть текст в HTML-теги
Ситуация
Вы хотите добавить в тело сайта какой-то текст: ссылку, адрес, номер телефона или описание товара. Но сделать это так, чтобы браузер понял: перед ним не просто текст, а часть кода веб-страницы.
Решение
Если работаете в Windows, нажмите Alt + Shift + W. Вокруг текста появятся стандартные теги <p> — их можно поменять на какие угодно. Для macOS такого хоткея пока нет, но мы обязательно расскажем, когда он появится.
![](/upload/setka_images/09052325072022_11a1d33ad10be24be98dc84cf3f4c2293103c450.gif)
Источник: Skillbox Media
Бонус: используем сокращения
Если вы планируете верстать веб-страницы в Sublime Text, обязательно присмотритесь к плагину Emmet. Он добавляет в программу новые команды для работы с HTML и CSS. Например, достаточно написать в коде !, и Emmet оформит за вас скелет веб-страницы со всеми нужными тегами. Выглядит это так:
![](/upload/setka_images/09054925072022_d5f448b1d45447906b1518b24eb2cf2b32fb1aed.gif)
Что ещё
Из коробки Sublime Text поддерживает более ста клавиатурных команд. Посмотреть полный список хоткеев можно на русскоязычном сайте редактора: есть версии и для Windows, и для macOS. А если хотите запомнить самое основное, можно скачать удобную шпаргалку с разбивкой по цветовым блокам.