К содержанию
RU

Подготовка VS Code

Установка редактора, расширения и настройки для первых HTML-страниц.

также в веб-дизайне и основах веб-разработки

На этой странице

Подготовьте редактор до работы с примерами. Если VS Code уже установлен, проверьте расширения и настройки ниже.

Установите VS Code

  1. Зайдите на сайт Visual Studio Code и скачайте установщик для вашей операционной системы. Скачать VS Code 

Сайт Visual Studio Code, кнопка загрузки

  1. Установите VS Code. В Windows можно включить пункты на скриншоте ниже: они добавляют редактор в контекстное меню и PATH. На macOS и Linux установщик выглядит иначе; используйте инструкцию для своей системы.

Окно установщика VS Code с отмеченными пунктами

  1. Слева на боковой панели найдите вкладку расширений (Extensions).

Иконка Extensions на боковой панели

  1. Установите расширения из таблицы. Нажмите на название, чтобы открыть страницу в Visual Studio Marketplace; проверьте автора, чтобы выбрать нужное расширение.
РасширениеАвторДля чего
Live Server Ritwick DeyОткрывает локальную страницу и обновляет её после сохранения
Prettier – Code formatter PrettierФорматирует код: отступы, переносы и пробелы
Color Highlight naumovsПодсвечивает значения цветов в коде соответствующим цветом

Настройте редактор

Вместо поиска отдельных переключателей вставьте готовые настройки:

  1. Нажмите F1, чтобы открыть палитру команд.
  2. Найдите и выберите Preferences: Open User Settings (JSON). Откроется файл settings.json с Вашими настройками. В русском интерфейсе название команды может быть переведено.
  3. Если файл пустой или содержит только {}, вставьте код ниже целиком. Если настройки уже есть, добавьте эти параметры внутрь существующих фигурных скобок, разделяя записи запятыми. Если какой-то параметр уже указан, измените его значение, не создавая повторную запись.
  4. Сохраните файл: Ctrl+S в Windows и Linux или Cmd+S на macOS.
settings.json
{
  "editor.linkedEditing": true,
  "editor.wordWrap": "on",
  "editor.tabSize": 4,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "prettier.tabWidth": 4
}

Что делают эти настройки:

  • editor.linkedEditing – при изменении имени HTML-тега меняет имя парного тега.
  • editor.wordWrap – визуально переносит длинные строки в окне редактора, не добавляя переносы в сам файл.
  • editor.tabSize – задаёт ширину табуляции в четыре пробела.
  • editor.defaultFormatter – выбирает установленное расширение Prettier для форматирования.
  • prettier.tabWidth – задаёт отступ в четыре пробела при форматировании через Prettier. Если в проекте есть конфигурационный файл Prettier, его настройки имеют приоритет.

VS Code уже закрывает HTML-теги автоматически. Автодополнение помогает писать код, но не гарантирует правильную вложенность. Проверяйте результат сами.

Да будет порядок!

Сейчас будет маленькое волшебство: одна команда расставит отступы и переносы за Вас. Никакой магии – просто Prettier.

Откройте или создайте файл с расширением .html. Нажмите F1 и выберите Format Document. Быстрые клавиши: Alt+Shift+F в Windows, Ctrl+Shift+I в Linux или Shift+Option+F на macOS.

Аккуратное форматирование помогает видеть вложенность и читать код, но не исправляет ошибки в устройстве HTML-страницы.

Что дальше

Теперь можно изучать теги и структуру HTML-страницы. В конце HTML-01 Вы соберёте свою страницу по заданию.