Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-21

1 <a>#База знаний</a>

2 <ul><li>3 фев 2021</li>

3 <li>0</li>

4 </ul>Становимся многорукими волшебниками: ускоряемся с помощью хоткеев и парочки других приёмов.

5 vlada_maestro / shutterstock

6 В IT пришёл из наружной рекламы, где проработал с десяток лет. В Skillbox изучает веб-вёрстку. Увлекается археологией, диджеингом и плёночной фотографией.

7 Здорово экономят время разработчика горячие клавиши. Есть такие и в Visual Studio Code. Здесь даже можно создавать свои сочетания, но большинству пользователей хватает исходных комбинаций (особенно новичкам, у кого и так глаза разбегаются от уймы настроек).

8 Пройдёмся по самым полезным для начинающего верстальщика. Читайте и сразу же пробуйте.

9 Типичная задача

10 Найти все элементы с классом link и стилизовать некоторые, присвоив им дополнительный класс.

11 Что делать

12 НажмитеCtrl + F(Windows) или⌘Cmd + F(macOS). Введите искомое - высветятся все найденные места. Остаётся перемещаться по ним (стрелочками в форме поиска).

13 Ситуация

14 Вы хотите создать комментарий или временно отключить участок кода (например, чтобы проверить работу оставшейся части).

15 Что делать

16 Выделите нужный участок и нажмитеCtrl + /(Windows) или⌘Cmd +/(macOS). Если выделения нет, то закомментируется строка, в которой стоит курсор (раскомментировать её можно так же).

17 Типичные ситуации

18 <ul><li>При проверке вёрстки понадобилось найти и изменить определённое свойство: инспектор кода в браузере показывает путь к нужному файлу (чаще всего со стилями) и номер строки в нём.</li>

19 <li>В редакторе кода появляется сообщение об ошибке в определённой строке.</li>

20 </ul>Что делать

21 НажмитеCtrl + G(Windows) или⌃Ctrl + G(macOS), введите номер строки - и вам не придётся листать вручную.

22 Типичная ситуация

23 Нужно изменить вложенность элемента, дать ему правильную обёртку. Вообще, перемещать элементы на уровень выше или ниже приходится часто, особенно на первых этапах вёрстки.

24 Что делать

25 Поставьте курсор на нужную строку и нажмитеAlt + ↑ / ↓(Windows) или⌥Option +↑ / ↓(macOS).

26 Следите за сохранением структуры документа - не забывайте переносить и закрывающие теги.

27 Ситуация

28 В разметку надо быстро добавить одинаковые элементы. То есть вставить дубликат строки выше или ниже этой же строки.

29 Что делать

30 Поставьте курсор на нужную строку и нажмитеShift+Alt + ↓ / ↑(Windows) или⇧Shift + ⌥Option +↓/↑(macOS).

31 Типичная потребность

32 Быстро выровнять код, чтобы он стал более читаемым, понятным, красивым и соответствовал вашему код-стайлу (например, о джавишном читайте<a>здесь</a>).

33 Что делать

34 ЖмитеShift + Alt + F(Windows) или⇧Shift + ⌥Option +F(macOS).

35 Чтобы форматирование работало:

36 <ul><li>Установите плагин форматирования кода.</li>

37 <li>Настройте редактор в соответствии с вашим код-стайлом. И не забудьте выставить верное число отступов (общеприняты 2 или 4).</li>

38 </ul>Мультикурсорность зрелищна сама по себе и здорово ускоряет работу верстальщика.

39 Ситуация

40 Вам понадобилось написать одно и то же сразу в нескольких местах.

41 Чтобы размножить курсор:

42 <ul><li>ЗажмитеAlt(в Windows) или⌥Option(в macOS) и кликайте левой кнопкой мышки там, куда нужно добавить курсор.</li>

43 <li>Выделите несколько строк, зажав среднюю кнопку мыши. В каждой из выделенных строк появится по курсору.</li>

44 <li>Если лень кликать мышкой, то дублировать курсор можно так:Ctrl + Alt + ↑ / ↓(Windows) или⌥Option + ⌘Cmd +↑ / ↓(macOS).</li>

45 </ul>Ситуация

46 Нужно изменить одинаковый код сразу в нескольких местах.

47 Что делать

48 Выделите мышью символы и нажмитеCtrl + D(Windows) или⌘Cmd +D(macOS). Если нажать больше одного раза, то к выделению добавится ещё одно вхождение того же куска далее по тексту. Затем можно редактировать все выделенные области сразу (подсвечиваются синим).

49 Как это работает

50 Вы набираете один-два символа, а автоподстановка предлагает название тега (в паре с закрывающим) для HTML или название свойства для CSS. Дождитесь, пока редактор подсветит предлагаемый вариант (когда их несколько - выберите нужный), и нажмите Tab или Enter.

51 Все доступные сокращения<a>здесь</a>. По мере запоминания ваши навыки и скорость будут расти, и, поверьте, это немалое удовольствие.

52 Зачем нужно

53 Чтобы быстрее создавать структуры из вложенных друг в друга тегов.

54 Например:нужно создать ненумерованный список, вложить в него четыре элемента, внутри каждого из которых будет по ссылке класса link. И всё это быстро-быстро.

55 Что делать

56 Достаточно набратьul>li*4>a.link,дождаться подсветки этого варианта (он в выпадашке один) и нажать Tab или Enter, а редактор сам вставит развёрнутую конструкцию. Это очень ускоряет работу, хотя поначалу и похоже на волшебство.

57 Сложно представить реальную работу в VS Code без терминала.

58 Ситуация

59 Нужно вызвать терминал, с которым легче искать ошибки в коде (оповещения будут во вкладке Problems), а также работать с <a>Git</a>(распределённая система управления версиями).

60 Что делать

61 НажатьCtrl + `для Windows или⌃Ctrl + `для macOS.

62 Запоминать горячие клавиши вовсе не сложно, главное - начать их применять. Полные списки сочетаний<a>тут</a>и <a>тут</a>, а сокращений -<a>здесь</a>.

63 Желаем вам быстрой и приятной работы в VS Code!

64 <a>Курс с трудоустройством: "Веб-разработчик" Узнать о курсе</a>