Как установить и настроить Visual Studio Code для верстки HTML и CSS

Visual Studio Code устанавливается с официального сайта code.visualstudio.com, а для верстки HTML и CSS требуется установить расширения Live Server, HTML CSS Support и Prettier через меню Extensions. После установки расширений и настройки параметров форматирования код будет подсвечиваться синтаксисом, автоматически форматироваться и отображаться в браузере в реальном времени.

Зачем нужна установка и настройка Visual Studio Code

Создание HTML и CSS файлов с полной поддержкой синтаксиса и автодополнения
Визуализация изменений кода в браузере в реальном времени благодаря расширению Live Server
Автоматическое форматирование кода для улучшения читаемости и соответствия стандартам
Подсветка синтаксиса и выявление ошибок на этапе написания кода
Поддержка множества языков программирования и веб-технологий
Интеграция с системой контроля версий Git для управления проектами
Кроссплатформенность: работа на Windows, macOS и Linux
Расширяемость через экосистему расширений для добавления нужного функционала

Пошаговая инструкция установки и настройки Visual Studio Code

Откройте браузер и перейдите на сайт code.visualstudio.com.
Нажмите большую кнопку Download для загрузки установщика Visual Studio Code.
Выберите версию для вашей операционной системы (Windows, macOS или Linux).
Дождитесь завершения загрузки файла VSCodeSetup-x.xx.x.exe (или аналогичного для вашей ОС).
Дважды нажмите на загруженный файл для запуска установщика.
Нажмите кнопку I accept the agreement для согласия с лицензией.
Нажмите Next для выбора папки установки.
Оставьте путь установки по умолчанию или выберите другую папку и нажмите Next.
На экране выбора дополнительных задач отметьте галочки Add to PATH и Register Code as an editor.
Нажмите Next для продолжения.
Нажмите Install для начала установки файлов программы.
Дождитесь завершения установки и нажмите Finish.
Запустите Visual Studio Code с рабочего стола или из меню Пуск.
В главном окне программы нажмите на иконку Extensions в левой боковой панели (или нажмите Ctrl+Shift+X).
В поле поиска введите Live Server и нажмите Enter.
В результатах поиска найдите расширение от Ritwick Dey и нажмите кнопку Install.
Дождитесь завершения установки расширения.
Снова в поле поиска введите HTML CSS Support и установите расширение от ecmel.
Введите в поле поиска Prettier и установите расширение Prettier - Code formatter.
Нажмите на иконку Settings в левой боковой панели (или нажмите Ctrl+,).
В поле поиска введите default formatter.
В выпадающем списке Default Formatter выберите Prettier - Code formatter.
Введите в поле поиска format on save.
Отметьте галочку Editor: Format On Save для автоматического форматирования при сохранении файла.
Введите в поле поиска tab size и установите значение 2 или 4 в зависимости от предпочтений.
Откройте или создайте новую папку проекта через меню File → Open Folder.
Создайте новый файл через File → New File и назовите его index.html.
Введите восклицательный знак ! и нажмите Tab для генерации шаблона HTML5.
Создайте папку css в папке проекта через контекстное меню.
Создайте файл style.css внутри папки css.
Свяжите CSS файл с HTML файлом, добавив строку <link rel="stylesheet" href="/css/style.css"> в раздел <head>.
Откройте файл index.html и нажмите правую кнопку мыши.
Выберите пункт Open with Live Server из контекстного меню.
Браузер автоматически откроется с вашим HTML файлом и будет обновляться при каждом сохранении изменений.

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

Нужно ли платить за Visual Studio Code? Visual Studio Code полностью бесплатен и с открытым исходным кодом, что делает его доступным для всех пользователей.

Как отключить автоматическое форматирование кода, если оно мешает? Откройте Settings, найдите Format On Save и снимите галочку, либо выберите другой форматер вместо Prettier.

Почему Live Server не обновляет браузер при изменении файлов? Убедитесь, что расширение Live Server установлено и активно, сохраните файл (Ctrl+S) и проверьте, что браузер открыт именно через опцию Open with Live Server.

Разработка и Развертывание