Как в visual studio code запустить html

Самый простой способ — открыть папку с файлами через проводник, выбрать необходимый файл, щелкнуть по нему правой кнопкой мыши и выбрать в разделе "Открыть с помощью" VS Code. Далее можно заняться редактированием файла. Вы увидите результат вёрстки в браузере, но это не слишком удобно — при любых изменениях придётся переходить в браузер и обновлять страницу. Можно немного облегчить этот вопрос с помощью установки расширения в VS Code - Live Server. Давайте настроим всё так, чтобы наша страничка открывалась сама и обновлялась, если вы что-то изменили в разметке или стилях. Для установки расширения нужно в VS Code нажать кнопку которая откроет магазин дополнений, вбить в поиске название - и нажать Install. Другой способ — скачать Live Server из магазина расширений по ссылке выше, но это менее удобно.

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

VS Code сам HTML не запускает: страницу показывает браузер. Быстрее всего открыть её через расширение Live Server. Оно запускает локальный сервер и обновляет страницу в браузере при каждом сохранении файла.

Через Live Server

1. Откройте панель расширений: Ctrl + Shift + X (на macOS Cmd + Shift + X).
2. Найдите Live Server (автор Ritwick Dey) и нажмите Install.
3. Откройте папку проекта: File → Open Folder.
4. Правый клик по index.html → Open with Live Server. Или кнопка Go Live в строке состояния внизу справа.

Страница откроется в браузере по адресу вида http://127.0.0.1:5500/index.html. Сохраните файл (Ctrl + S), и браузер обновится сам.

Если Live Server не открывает страницу, проверьте, что проект открыт через File → Open Folder.

Без расширений

Найдите файл в проводнике или Finder и откройте его двойным кликом: он откроется в браузере по умолчанию. Из VS Code: правый клик по файлу → Reveal in File Explorer (на macOS — Reveal in Finder).

После каждого изменения страницу нужно обновлять вручную: F5 или Ctrl + R.

Предпросмотр внутри VS Code

Расширение Live Preview от Microsoft показывает страницу во вкладке рядом с кодом. После установки: правый клик по HTML-файлу → Show Preview.

Быстрый шаблон страницы

В пустом файле index.html наберите ! и нажмите Tab. Встроенный в VS Code Emmet вставит каркас документа:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

</body>
</html>

Поменяйте lang="en" на lang="ru", если страница на русском.

Если ! не срабатывает, проверьте режим файла в правом нижнем углу: там должно быть HTML. Новый файл без расширения VS Code считает обычным текстом.

Visual Studio и Visual Studio Code

Visual Studio Community — другая программа, большая среда для C# и .NET. Для вёрстки используют Visual Studio Code: он бесплатный и работает на Windows, macOS и Linux.

Как настроить VS Code для вёрстки и собрать первую страницу, разбирают в бесплатном курсе «Основы веб-разработки» и на курсе «Профессиональная верстка».