Для запуска Live Server установите расширение Live Server, откройте в VS Code всю папку сайта, выберите index.html и выполните Open with Live Server или нажмите Go Live. Если команды нет, сначала проверьте, что расширение включено и файл действительно имеет расширение .html. Если открывается 404, проблема чаще всего в корне рабочей папки или пути к файлу, а не в HTML.
Двойной клик по HTML открывает адрес вида file:///.... Для статической страницы этого иногда достаточно, но относительные пути, запросы и поведение браузера удобнее проверять через локальный HTTP-сервер. Live Server запускает такой сервер и перезагружает страницу после сохранения файлов.
Найти расширение Live Server в Marketplace и убедиться, что оно Enabled.
Рабочая область должна начинаться с корня сайта, а не с одного случайного файла.
Использовать Go Live или контекстную команду для index.html.
Установка расширения и первый запуск
Откройте Extensions сочетанием Ctrl+Shift+X или Cmd+Shift+X, найдите Live Server и проверьте издателя расширения. После установки откройте папку через File, Open Folder. В Explorer должен быть виден index.html, а не только вкладка файла из неизвестного каталога.
<!doctype html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Проверка Live Server</title>
</head>
<body>
<h1>Сервер работает</h1>
</body>
</html>| Шаг | Что должно быть видно | Если не видно |
|---|---|---|
| Установка | Кнопка Disable или Uninstall | Расширение ещё не активно |
| Открытие папки | Дерево проекта в Explorer | Используйте Open Folder |
| Выбор файла | Активная вкладка index.html | Проверьте расширение файла |
| Запуск | Go Live или команда в меню | Перезагрузите окно VS Code |
| Браузер | Адрес http://127.0.0.1:порт | Проверьте уведомление и порт |
Расширение запускается после открытия корневой папки и выбора HTML-файла.
Почему нужно открыть папку, а не один HTML-файл
- Создайте отдельную папку проекта без посторонних файлов.
- Положите
index.htmlв выбранный корень. - Создайте рядом каталоги
css,jsиimagesпри необходимости. - Откройте именно эту папку в VS Code через Open Folder.
- Проверьте относительные пути от текущего HTML-файла.
- Запустите index.html и сохраните небольшое изменение.
Корень сервера определяет, как URL сопоставляется с файлами. Если открыта слишком высокая папка, адрес страницы получает лишний сегмент. Если слишком низкая, ссылка ../images/logo.png может выйти за доступный корень. Для первого сайта удобнее хранить index.html и каталоги ресурсов внутри одной папки.
my-site/
├── index.html
├── css/
│ └── styles.css
├── js/
│ └── app.js
└── images/
└── logo.png
URL строится относительно открытого корня, поэтому структура проекта должна быть предсказуемой.
Если файл лежит в pages/about.html, его адрес обычно содержит /pages/about.html. Ошибка 404 означает, что сервер не нашёл путь в выбранном корне. Сначала откройте index.html из Explorer, затем переходите по относительным ссылкам.
Что делать, если нет Go Live или Open with Live Server
Команда может отсутствовать, если расширение отключено для текущей рабочей области, VS Code требует перезагрузки, открыт не HTML-файл или рабочая среда ограничивает расширения. Откройте карточку расширения и посмотрите статус, затем вызовите Command Palette и найдите команды Live Server по имени.
| Симптом | Проверка | Действие |
|---|---|---|
| Нет Go Live | Статус расширения | Enable и Reload Window |
| Нет контекстной команды | Активный файл | Открыть настоящий файл .html |
| Открывается 404 | Путь в адресной строке | Переоткрыть корень папки |
| Порт занят | Уведомление или Output | Остановить старый сервер или сменить порт |
| Страница не обновляется | Сохранён ли файл | Включить Auto Save или нажать Save |
| CSS не меняется | Network и путь к stylesheet | Исправить href и очистить кэш |
<!-- Пути считаются от index.html -->
<link rel="stylesheet" href="./css/styles.css">
<script src="./js/app.js" defer></script>
<img src="./images/logo.png" alt="Логотип проекта">
Симптом направляет к статусу расширения, Output VS Code или Network браузера.
Почему автообновление не срабатывает
Live reload реагирует на сохранённые изменения файлов, а не на каждый набранный символ, если Auto Save выключен. Иногда страница открыта не с Live Server, а через file:// или другой порт. Ещё один частый случай: CSS подключён по неверному пути, поэтому HTML обновляется, но редактируется не тот файл стилей.
Адрес file:// не связан с запущенным Live Server и не получит его автообновление.
Фреймворк ожидает собственный dev server, сборку модулей и переменные окружения.
Сначала остановите старый экземпляр и посмотрите Output. Новый порт меняет origin.
Браузер может загружать другой файл или получать 404. Проверьте Network.
Убедитесь, что URL начинается с http://, принадлежит текущему порту и указывает на нужный файл. Затем сохраните заметное изменение текста. Если HTML обновился, сервер и live reload работают, а отдельную проблему CSS или JS можно разбирать дальше.
Когда Live Server подходит, а когда нужен другой сервер
Live Server удобен для статических HTML, CSS и обычного браузерного JavaScript. Он не реализует API, базу данных, серверные маршруты и сборку npm-пакетов. Если в package.json есть script dev, сначала прочитайте README проекта и используйте указанную команду.
- Расширение установлено, включено и VS Code перезагружен при необходимости.
- В рабочей области открыта одна корневая папка сайта.
- index.html имеет корректное расширение и виден в Explorer.
- Страница открыта по http, а не file.
- Сохранение HTML вызывает видимое обновление в браузере.
- CSS, JS и изображения возвращают статус 200 во вкладке Network.
127.0.0.1 или localhost предназначен для вашего компьютера. Чтобы поделиться проектом, нужен хостинг или репозиторий и отдельный процесс публикации. Не отправляйте знакомому localhost-ссылку.Что делает Live Server?
Запускает локальный HTTP-сервер для файлов и обычно обновляет страницу после сохранения.
Почему важен Open Folder?
Открытая папка задаёт понятный корень проекта и относительных путей.
Что проверить, если нет Go Live?
Статус расширения, перезагрузку окна, тип активного файла и доступность команды в Command Palette.
Почему страница не обновляется?
Файл мог быть не сохранён, страница открыта через file:// или подключён другой ресурс.
Подходит ли Live Server для Vite?
Обычно нет. Vite запускают собственной командой dev из проекта.
Создайте страницу по пошаговому руководству HTML, CSS и JavaScript и закрепите основы в курсе HTML. Для динамики пригодится статья о DOM.
Если скрипт подключён, но кнопка не работает, переходите к разбору типичных багов JavaScript. В Кодике удобно держать структуру файлов и браузерный URL рядом, чтобы сразу замечать неверный корень.