Frontend Academy · Урок

VSCode: расширения, Emmet и сочетания клавиш

Устанавливайте необходимые расширения, используйте сокращения Emmet для мгновенного написания HTML и CSS и изучайте сочетания клавиш, ускоряющие редактирование.

Урок 2 из 414 шагов

«VSCode: расширения, Emmet и сочетания клавиш» — бесплатный урок Frontend Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Frontend Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Frontend Academy содержит 4 уроков всего.

Почему VSCode?

Visual Studio Code — самый популярный редактор кода для фронтенд-разработки. Он бесплатный, с открытым исходным кодом, быстрый и обладает огромной экосистемой расширений. Большинство команд фронтенд-разработчиков используют его как стандартный редактор.

Необходимые расширения

Необходимые расширения для фронтенд-разработки: ESLint (проверка кода прямо в редакторе), Prettier (автоматическое форматирование), GitLens (встроенная информация об авторстве строк), Path IntelliSense (автодополнение путей к файлам), Auto Rename Tag (переименование парных HTML-тегов).

Расширения для отдельных языков

Для TypeScript: встроенные средства поддержки TypeScript и JavaScript. Для React: фрагменты ES7+ React/Redux. Для Vue: Volar (официальное расширение). Для Tailwind: Tailwind CSS IntelliSense.

Что такое Emmet?

Emmet встроен в VSCode. Введите сокращение и нажмите Tab, чтобы развернуть его в полный HTML или CSS. Это значительно ускоряет написание разметки.

<!-- Type then press Tab: -->
nav>ul>li*3>a{Link $}

<!-- Expands to: -->
<nav>
  <ul>
    <li><a href="">Link 1</a></li>
    <li><a href="">Link 2</a></li>
    <li><a href="">Link 3</a></li>
  </ul>
</nav>

Распространённые сокращения Emmet

Изучите эти сокращения Emmet: ! → шаблон HTML, div.container → div с классом, ul>li*5 → список из 5 элементов, input:email → поле для ввода электронной почты, form:post → форма с method=post.

<!-- type: div.card>img+h3{Title}+p{Description} → -->
<div class="card">
  <img src="" alt="">
  <h3>Title</h3>
  <p>Description</p>
</div>

Необходимые сочетания клавиш

Сочетания клавиш, которые экономят больше всего времени: Ctrl/Cmd+P (быстрое открытие файла), Ctrl/Cmd+Shift+P (палитра команд), Alt+Click (несколько курсоров), Ctrl/Cmd+D (выбор следующего вхождения), Ctrl/Cmd+/ (включение или отключение комментария).

Редактирование с несколькими курсорами

Alt+Click добавляет курсоры. Ctrl+Alt+Up/Down добавляет курсоры выше или ниже. Ctrl+D выбирает следующее вхождение выделенного фрагмента. При использовании нескольких курсоров все изменения выполняются одновременно — это удобно для переименования переменных в небольших областях видимости.

Встроенный терминал

Откройте терминал внутри VSCode с помощью Ctrl+` (обратная кавычка). Его можно разделить, чтобы запускать сервер разработки в одной панели, а тесты — в другой, не покидая редактор.

Настройки рабочего пространства

Создайте в проекте файл .vscode/settings.json, чтобы задать настройки проекта, переопределяющие пользовательские настройки. Зафиксируйте этот файл в репозитории, чтобы все участники команды работали одинаково: с форматированием при сохранении, заданным размером табуляции и колонками линейки.

// .vscode/settings.json
{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.tabSize": 2
}

IntelliSense и автоматические импорты

IntelliSense в VSCode предоставляет автодополнение, подсказки параметров и документацию при наведении. В проектах TypeScript он также автоматически добавляет импорты символов после выбора варианта автодополнения — импортировать вручную не требуется.

Переход к определению и ссылкам

Щёлкните с зажатой клавишей Ctrl (или нажмите F12) любой символ, чтобы перейти к его определению. Shift+F12 показывает все ссылки на него. Ctrl+Shift+F выполняет поиск по всем файлам. Эти возможности незаменимы при навигации по большим кодовым базам.

Панель проблем

Панель проблем (Ctrl+Shift+M) перечисляет все ошибки и предупреждения ESLint и TypeScript в открытых файлах. Это самый быстрый способ понять, что нужно исправить перед фиксацией изменений.

Быстрая проверка

Во что в VSCode разворачивается сокращение Emmet ul>li*3?

Ответь в интерактивном уроке

Итоги: рабочий процесс в VSCode

Установите ESLint, Prettier и расширения для нужных языков. Используйте Emmet для быстрого написания HTML/CSS. Изучите сочетания клавиш (Cmd+P, Cmd+Shift+P, Cmd+D). Задайте formatOnSave в .vscode/settings.json. Используйте несколько курсоров для повторяющихся изменений. Переходите к определению, чтобы перемещаться по коду.

Можно начать бесплатно

Изучай HTML с ИИ-репетитором — бесплатно

Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.

Курсы: 41
Уроки: 163

Начать учиться бесплатно Посмотреть полный курс

Часто задаваемые вопросы

Урок «VSCode: расширения, Emmet и сочетания клавиш» бесплатный?

Да — полный текст урока «VSCode: расширения, Emmet и сочетания клавиш» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Frontend Academy, подпишись на CoddyKit PRO. Курс Frontend Academy содержит 4 уроков всего.

Чему я научусь в уроке «VSCode: расширения, Emmet и сочетания клавиш»?

Устанавливайте необходимые расширения, используйте сокращения Emmet для мгновенного написания HTML и CSS и изучайте сочетания клавиш, ускоряющие редактирование. Ты практикуешь Frontend Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Frontend Academy?

Предыдущий опыт не требуется. Frontend Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.

Сколько времени занимает урок «VSCode: расширения, Emmet и сочетания клавиш»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Frontend Academy?

Да. Каждый урок Frontend Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

Chrome DevTools: Elements, Console, Network
VSCode: расширения, Emmet и сочетания клавиш
Настройка Prettier и ESLint
Совместимость браузеров и caniuse.com

← Назад к Frontend Academy