Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-21

1 - Ты сейчас программируешь в VS Code. Расскажи, как ты выбирала текстовый редактор и чем пользовалась раньше?

2 - Четыре года я писала код в Notepad++, пока не начала получать постоянные заказы на комплексную разработку проектов - настраивала сайты на WordPress под индивидуальный дизайн, где нужно работать с большим количеством папок и файлов.

3 В Notepad++ меня не устраивало представление дерева файлов. Было неудобно перемещаться между частями объёмного проекта, а также создавать и редактировать сразу несколько объектов. Я не хотела терять скорость из-за проблемной навигации и решила подыскать новый редактор - посмотрела несколько обзоров на YouTube, попробовала VS Code и осталась довольна выбором.

4 - Что нравится в VS Code?

5 - Начнём с того, что VS Code - это бесплатный редактор с множеством возможностей для кастомизации. Мне нравится стандартная цветовая схема и настройки по умолчанию. К тому же внешний вид легко изменить - для этого можно поэкспериментировать с базовыми настройками или подобрать оформление через магазин плагинов: есть масса бесплатных вариантов почти на любой вкус.

6 Внешний вид редактора VS Code Валентины Дикой. Тема: Dark+ (default dark). Шрифты: Menlo, Monaco, Courier New, Monospace. Размер шрифтов: 20. Скриншот: предоставлен Валентиной ДикойСледующий пункт - поддержка сообщества Microsoft. Во-первых, пользуясь VS Code я вряд ли попаду в ситуацию, когда внешний разработчик прекратит поддержку важного для меня расширения и у этого инструмента не будет альтернативы. Во-вторых, если я столкнусь с какой-то проблемой, скорее всего, её уже кто-то решил. Мне остаётся только загуглить ответ, найти объяснение и продолжить работу. В третьих, в интернете полно подробных обучающих материалов и ответов на все вопросы, которые могут возникнуть у новичка - есть инструкции и видео на русском языке. Для менее популярных инструментов информацию найти сложнее.

7 Если говорить об удобстве, то я получила редактор с классной навигацией, где в одну рабочую область помещается структура любого проекта - все файлы перед глазами и не нужно ничего дополнительно открывать. Это увеличивает мою продуктивность.

8 Ещё мне нравится плагин Emmet, который встроен в VS Code по умолчанию. С ним я могу быстрее писать код за счёт добавления коротких команд. Например, если я наберу "! + Enter", то сразу получу каркас HTML-документа - мне не нужно запоминать длинный шаблон, откуда-то его копировать или прописывать вручную. Аналогичные команды есть для большинства действий, которые нужны для вёрстки.

9 Демонстрация возможностей плагина Emmet в VS Code. Одной командой создаём стандартную структуру HTML-документа- Можешь показать, как ты пользуешься VS Code?

10 - Давай возьмём тестовый проект и попробуем натянуть HTML-шаблон на WordPress. Пройдёмся по основным этапам:

11 <ol><li>Создаём файл шаблона для вывода категории записей в WordPress.</li>

12 <li>Берём зарезервированную в WordPress функцию get_header, обращаемся к файлу header.php и получаем данные для каждого шаблона страницы.</li>

13 <li>Запускаем цикл вывода контента с сайта с помощью команды have_post.</li>

14 <li>Переносим вёрстку из готового HTML-файла и с помощью PHP-запросов добавляем название статьи, описание, картинку и прочую информацию.</li>

15 </ol>Если вы не знакомы с WordPress и не поняли ничего из перечисленного - сейчас это не важно. Посмотрите видео, где весь процесс показан вживую. Понаблюдайте и, не вдаваясь в детали, обратите внимание на готовые конструкции, которые предлагает VS Code в процессе вёрстки. Программа подсказывает, что и когда нужно выполнить.

16 Демонстрация возможностей VS Code: натяжка HTML-шаблона на WordPress. Видео: канал "Vel Wild - Девушка программист"- Какими плагинами пользуешься?

17 - Для большинства задач мне хватает стандартных настроек редактора, поэтому дополнительных плагинов у меня немного. Я пользуюсь только необходимыми инструментами, которые можно бесплатно скачать из репозитория VS Code.

18 Russian Language Pack for Visual Studio Code.Плагин русифицирует интерфейс программы и помогает тем, у кого не очень с английским. Я его поставила, когда знакомилась с VS Code, но сейчас почти не использую - выполняю большинство команд через терминал или горячие клавиши и не смотрю, как они называются.

19 Live Server.Плагин создаёт локальный сервер, на котором удобно просматривать промежуточные результаты работы. Например, если я редактирую HTML-файл, то на отдельной странице могу просматривать внесённые изменения. Добавила картинку или новый блок текста - сервер автоматически всё отображает и мне не нужно переходить между разными браузерами, кликая на перезагрузку каждой страницы.

20 WordPress Snippets.Этот плагин ускоряет написание кода за счёт добавления готовых конструкций, скриптов, классов и блоков кода из WordPress. Работает так: я начинаю писать название какой-то команды, получаю скелет кода и дополняю его нужными данными. Помогает меньше обращаться к техдокументации по WordPress.

21 Auto Complete Tag.Плагин автоматически закрывает и переименовывает теги в HTML-, JavaScript- и React-файлах. Например, если вместо открывающего тега я напишу <h1>, то плагин изменит закрывающий тег - уберёт и поставит </h1>.

22 PHP Debug.Это отладчик кода, который помогает находить и исправлять ошибки в синтаксисе или логике программы. Плагин подсвечивает разные функции, выводит подсказки, расставляет метки для точек остановки и содержит множество других опций для форматирования PHP-файла. Отладка нужна в любом серьёзном проекте.

23 Плагины для VS Code: подборка Валентины Дикой. Скриншот: предоставлен Валентиной Дикой- Расскажи про горячие клавиши: какими пользуешься и как запоминаешь?

24 - Горячие клавиши - незаменимый инструмент WordPress-разработчика, и я не представляю, как раньше обходилась без них. Не буду перечислять все свои комбинации, поскольку многим читателям они могут не подойти. Чтобы работа с горячими клавишами была эффективной, необходимо самостоятельно определить, какие частые команды вы хотите выполнять без мышки. Поэтому я перечислю несколько стандартных популярных сочетаний для управления VS Code.

25 Сочетание клавишДействиеCtrl + Shift + TabПеремещение по вкладкам в текущей историиCtrl + /КомментированиеCtrl + FПоискCtrl + SСохранить файлCtrl + DПоследовательно выделить идентичные элементыCtrl + PБыстро перейти к любому файлу в проектеCtrl + Shift + PОткрыть палитру всех команд редактораAlt + Shift + IДобавить курсор после каждой выделенной строкиCtrl + Shift + LВыбрать все совпаденияCtrl + K + MУстановить тип файла для нового документаCtrl + Shift + NСоздать новое окно в редактореCtrl + NСоздать новый файлCtrl + GПерейти к указанной строке или колонкеCtrl + K + Ctrl + FФорматировать выделенный фрагментShift + Alt + FФорматировать весь документCtrl + [/ Ctrl +]Уменьшить или увеличить отступ в кодеAlt + ↑ / Alt + ↓Перенести строку вверх или внизShift + Alt + ↑ / Shift +Alt + ↓Скопировать строку вверх или внизCtrl + ← / Ctrl + →Перенести курсор на одно слово влево или вправоCtrl + Shift + FЗапустить глобальный поиск по файламЕсли среди всего списка горячих клавиш в VS Code не найдётся нужной комбинации, то вы можете назначить её самостоятельно:

26 <ol><li>В левом нижнем углу редактора выберите раздел "Настройки" и перейдите в подраздел "Сочетание клавиш". Перед вами появится строка поиска и список всех клавиш, которые используются по-умолчанию.</li>

27 <li>Вбейте в строку поиска команду, которую вы ищете. Если под неё нет горячих клавиш - добавьте. Выбрать можно любую незанятую комбинацию.</li>

28 <li>Если под нужную команду есть горячие клавиши и они вас не устраивают - в пару кликов измените настройки и сделайте так, как удобно. Например, если вы часто пользуетесь глобальным поиском по файлам и вместо Ctrl + Shift + F нажимаете Ctrl + Shift + G - измените сочетание и работайте с комфортом.</li>

29 </ol>Чтобы не запутаться в комбинациях - рекомендую бесплатную программу Anki, которая помогает запоминать информацию с помощью флеш-карточек. Если записывать по одной горячей клавише в день и не забывать про повторение, то примерно через полгода реально выучить все команды VS Code. Однако если кому-то не нравится софт, - старые добрые стикеры ещё никто не отменял.

30 👉Что такое флеш-карточки и как ими пользоваться?

31 Флэш-карточки - это инструмент для ускоренного запоминания информации. Вы разбиваете предмет на части и записываете изученный материал в виде вопросов и ответов. С одной стороны карточки должен находится вопрос, с другой - ответ.

32 Вопрос:что делает комбинации "Shift + Alt + ↑" в VS Code?

33 Ответ:эта горячая клавиша копирует строку вверх.

34 Чтобы не забывать выученное, работу с флэш-карточками принято комбинировать с техникой интервальных повторений. Суть: вы через разные периоды повторяете свои горячие клавиши и оцениваете, насколько легко получилось их вспомнить. Чем лучше вы помните карточку, тем реже её нужно повторять и наоборот.

35 В программе Anki функция интервального повторения встроена по-умолчанию. Если вы будете делать флэш-карточки из картона - почитайте про Систему Лейтнера.

36 - Какие у VS Code недостатки?

37 - Я использую VS Code для работы с WordPress и изучения React. Всё отлично работает, и мне сложно объективно выделить недостатки. Пожалуй, из-за большого спектра возможностей некоторым новичкам будет сложно освоиться: первое время придётся часто гуглить, читать документацию и смотреть обучающие видеоролики.

38 Ещё я слышала, что VS Code - прожорливая программа, которая отнимает много ресурсов ПК. Я с этим не соглашусь: если устанавливать только нужные плагины и расширения, то среднего по мощности компьютера будет достаточно для работы.

39 - Планируешь ли переходить на другую IDE?

40 - Нет. VS Code - это фантастический инструмент для вёрстки сайтов, который меня полностью устраивает. Давно на одном из форумов я читала ветку про оптимизацию работы программиста и кто-то из пользователей советовал всегда устанавливать продвинутые редакторы кода. В тот момент у меня был Notepad++ и я даже не думала его менять - не вижу смысла отказываться от привычного, проверенного инструмента.

41 Если бы между Notepad++ и VS Code не было разницы, я бы никуда не переходила. Для меня смена IDE означает трату времени на обучение и запоминание нужных функций - какое-то время я медленнее работаю и теряю в продуктивности. Поэтому к вопросу выбора нового редактора я вернусь только в том случае, если VS Code в чём-то перестанет меня устраивать. И тогда, наверное, попробую освоить PhpStorm.

42 Текстовые редакторы:

43 <ul><li>VS Code:<a>инсталлятор</a>,<a>документация</a>.</li>

44 <li>Notepad++:<a>инсталлятор</a>,<a>документация</a>.</li>

45 </ul>Оформление:

46 <ul><li><a>Настройка цветовых тем для VS Code</a>.</li>

47 <li><a>Большая подборка светлых, тёмных и трендовых тем</a>.</li>

48 </ul>Плагины:

49 <ul><li>Russian Language Pack for Visual Studio Code:<a>инсталлятор</a>,<a>документация</a>;</li>

50 <li>Live Server:<a>инсталлятор</a>,<a>документация</a>.</li>

51 <li>WordPress Snippets:<a>инсталлятор</a>,<a>документация</a>.</li>

52 <li>Auto Complete Tag:<a>инсталлятор</a>,<a>документация</a>.</li>

53 <li>PHP Debug:<a>инсталлятор</a>,<a>документация</a>.</li>

54 </ul>Горячие клавиши:

55 <ul><li><a>Статья в Skillbox Media "‎Горячие клавиши в VS Code"</a>.</li>

56 <li><a>Шпаргалка с горячими клавишами в VS Code</a>.</li>

57 <li>Плагин Emmet:<a>инсталлятор</a>,<a>документация</a>,<a>обзорная статья</a>.</li>

58 <li>Флеш-карты для запоминания Anki:<a>инсталлятор</a>,<a>документация</a>.</li>

59 <li><a>Статья про систему Лейтнера в "Википедии"</a>.</li>

60 </ul>Статьи про VS Code в Skillbox Media:

61 <ul><li><a>"‎Быстрая вёрстка: какие инструменты использовать и каких правил придерживаться"</a>.</li>

62 <li><a>"‎Инструкция: заливаем проект на GitHub без командной строки"</a>.</li>

63 </ul>