Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-21

1 <a>#статьи</a>

2 <ul><li>26 июл 2022</li>

3 <li>0</li>

4 </ul>Настоящие профи пишут код, не отрывая пальцы от клавиатуры. Попробуйте и вы.

5 Иллюстрация: Оля Ежак для Skillbox Media

6 Шеф-редактор Skillbox Media "Код". Пишет о разработке, софт-скиллах и культовых личностях в IT. Обожает Swift, продукты Apple и мемы про код.

7 Когда разработчику нужно быстро написать или проверить код, он использует Sublime Text. А если скорости нужно ещё больше, он изучает горячие клавиши и становится многоруким чародеем, способным в два счёта обработать любой код, почти не касаясь мыши. Как этого достичь и какие хоткеи стоит взять на вооружение - разбираемся в этой статье.

8 <ul><li>Отключить какой-то участок кода и посмотреть, как программа работает без него. Полезно при тестировании и отладке.</li>

9 <li>Запустить программу, даже если какая-то функция ещё не готова.</li>

10 </ul>Поставьте курсор напротив нужной строки или выделите фрагмент кода, а потом нажмите горячие клавиши Ctrl + / (для macOS: ⌘Cmd + /).

11 Источник: Skillbox MediaДопустим, вы запускаете код в консоли браузера. Встроенный интерпретатор его проверяет и говорит: "В таком-то файле и в такой-то строке есть ошибка". Если проект небольшой, проблемную строку можно найти и поправить за две минуты. Но если в программе тысяча строк кода, придётся долго скроллить файл, чтобы добраться до нужного места. Что делать?

12 <ul><li>Нажимаем горячие клавиши Ctrl + G (и в macOS, и в Windows).</li>

13 <li>Вводим номер нужной строки.</li>

14 <li>Переходим к проблеме и устраняем её.</li>

15 </ul>Переходим к 166-й строкеИсточник: Skillbox MediaВы решили написать один и тот же текст сразу в нескольких строках. Например, в вашем HTML-файле есть 25 тегов p, и для каждого нужно задать новые атрибуты: выровнять текст по центру, перекрасить в зелёный цвет, изменить начертание. Можно прописать атрибуты вручную 25 раз, но на это уйдёт много времени.

16 В Sublime Text можно "разделить" курсор и отредактировать сразу несколько строк одновременно. Есть два способа:

17 <ul><li>Точный.Зажимаем Ctrl и кликаем левой кнопкой мыши по каждой строке, куда нужно внести изменения.</li>

18 <li>Быстрый.Зажимаем среднюю кнопку мыши (колёсико) и выделяем нужные строки - в каждой из них появится курсор.</li>

19 </ul>Устанавливаем одинаковое значение атрибута align для всех абзацевИсточник: Skillbox MediaВы разбираете код коллеги и видите там функцию с названием в духе "overTherainbow". Звучит красиво, но на деле непонятно, зачем эта функция нужна, как работает и что возвращает. В таких случаях название нужно однозначно менять - причём сразу везде, иначе код перестанет работать.

20 <ul><li>Выделяем слово, которое нужно заменить.</li>

21 <li>Нажимаем Alt + F3 в Windows или ⌘Cmd + Ctrl + G в macOS.</li>

22 <li>Напротив каждого такого слова в коде появится курсор: теперь можно стереть или добавить какие-то буквы, а то и вообще написать всё заново.</li>

23 </ul>Меняем название функцииИсточник: Skillbox MediaГлавная фишка Sublime Text - многозадачность. В соседних вкладках можно открыть много разных проектов и работать над ними параллельно. Кроме того, каждую вкладку можно поделить на несколько экранов и разложить всё перед глазами, как на столе у хирурга :)

24 Экран в Sublime Text можно разделить так:

25 <ul><li>Вертикально (на 2-4 столбца) - Shift + Alt + 2-4.</li>

26 <li>Горизонтально (на 2-3 строки) - Shift + Alt + 8-9.</li>

27 <li>Табличкой (плитками 2 × 2) - Shift + Alt + 5.</li>

28 <li>Вернуть всё как было - Shift + Alt + 1.</li>

29 </ul>Для macOS сочетания горячих клавиш те же, но вместо Shift нажимаем ⌘Cmd.

30 Источник: Skillbox MediaНужно поменять очерёдность событий в скрипте или переместить переменную из одного блока в другой.

31 <ul><li>Стрелочками (для обеих систем) - выделяем строку и двигаем её кнопками Shift + Ctrl + ↑↓ в Windows или ⌘Cmd + Ctrl + ↑↓ в macOS.</li>

32 <li>Удобными свопами (только для Windows) - выделяем нужные фрагменты кода, а потом нажимаем Ctrl + T. Строки будут меняться местами, как мячи в руках жонглёра.</li>

33 </ul>Источник: Skillbox MediaЕсли вы уже работали в команде разработки, то могли слышать от опытных коллег: "Дублирование кода - зло, не делай так". В Computer Science даже есть такой принцип - don’t repeat yourself (сокращённо DRY). Но, как говорят мудрецы, если очень хочется - то можно. Поэтому держите инструкцию:

34 <ul><li>Выделяем фрагмент, который хотим дублировать.</li>

35 <li>Нажимаем клавиши Ctrl + Shift + D в Windows или ⌘Cmd + Shift + D в macOS.</li>

36 <li>Создаём столько копий, сколько нужно.</li>

37 </ul>Источник: Skillbox MediaУ программистов так бывает: скопировал строку, по дороге отвлёкся, ещё что-то скопировал, потом ещё - и уже не помнишь, что и куда хотел вставить. Чтобы такого не было, Sublime Text сохраняет в буфер обмена 15 последних копий, которые вы сделали в документе.

38 Вот как их оттуда достать:

39 <ul><li>Зажимаем Ctrl + K + V (для macOS - ⌘Cmd + K + V).</li>

40 <li>Выбираем из списка нужную строку.</li>

41 <li>Левой кнопкой мыши ставим её куда надо.</li>

42 </ul>Источник: Skillbox MediaВы хотите добавить в тело сайта какой-то текст: ссылку, адрес, номер телефона или описание товара. Но сделать это так, чтобы браузер понял: перед ним не просто текст, а часть кода веб-страницы.

43 Если работаете в Windows, нажмите Alt + Shift + W. Вокруг текста появятся стандартные теги - их можно поменять на какие угодно. Для macOS такого хоткея пока нет, но мы обязательно расскажем, когда он появится.

44 Оборачиваем строку текста в тег H1Источник: Skillbox MediaЕсли вы планируете верстать веб-страницы в Sublime Text, обязательно присмотритесь к плагину<a>Emmet</a>. Он добавляет в программу новые команды для работы с HTML и CSS. Например, достаточно написать в коде !, и Emmet оформит за вас скелет веб-страницы со всеми нужными тегами. Выглядит это так:

45 Источник: Skillbox MediaИз коробки Sublime Text поддерживает более ста клавиатурных команд. Посмотреть полный список хоткеев можно на русскоязычном сайте редактора: есть версии и для<a>Windows</a>, и для<a>macOS</a>. А если хотите запомнить самое основное, можно скачать<a>удобную шпаргалку</a>с разбивкой по цветовым блокам.

46 <a>Научитесь: Профессия Java-разработчик + ИИ Узнать больше</a>