Настройка окружения: VS Code и Live Server

В этом уроке мы установим редактор кода и настроим всё необходимое, чтобы сразу начать писать и запускать веб-страницы прямо на своём компьютере.

---

Редактор кода — зачем он нужен?

Технически писать HTML и CSS можно даже в стандартном «Блокноте». Но уже через пятнадцать минут станет очевидно, почему так никто не делает: нет подсветки кода, нет подсказок, нет автодополнения. Работать с кодом в обычном текстовом редакторе — всё равно что забивать гвозди ложкой.

Редактор кода — это специализированная программа, которая делает работу с кодом удобной:

• подсвечивает синтаксис — разные части кода окрашиваются по-разному, и структуру сразу видно;
• предлагает автодополнение — начал писать div, нажал Tab — получил полный тег;
• показывает ошибки — опечатки и проблемы видны ещё до запуска;
• поддерживает расширения — можно добавить любой инструмент под свои задачи.

---

Какой редактор выбрать?

Вариантов много. Вот самые популярные среди веб-разработчиков:

Мы будем использовать Visual Studio Code (VS Code). Причин несколько:

1. Он бесплатный и работает на Windows, macOS и Linux.
2. Он самый распространённый в индустрии — если вы спросите совет у другого разработчика или посмотрите туториал, скорее всего, там будет именно VS Code.
3. У него огромная библиотека расширений под любую задачу.
4. Он достаточно быстрый и не требует мощного железа.

Если вы уже используете другой редактор и чувствуете себя в нём комфортно — продолжайте. Всё, что мы будем делать на курсе, применимо в любом редакторе. VS Code мы рекомендуем как отправную точку, а не как обязательное условие.

---

Установка VS Code

1. Перейдите на официальный сайт: code.visualstudio.com
2. Нажмите большую кнопку Download — сайт автоматически определит вашу операционную систему.
3. Запустите скачанный установщик и следуйте инструкциям. Все настройки по умолчанию подойдут.
4. После установки откройте VS Code.

---

Интерфейс VS Code — быстрая ориентация

После первого запуска вы увидите несколько основных зон:

• Боковая панель (слева) — проводник файлов, поиск, расширения и другие инструменты. Значки сверху переключают разделы.
• Редактор (центр) — здесь открываются и редактируются файлы. Можно открывать несколько файлов во вкладках.
• Терминал (снизу) — встроенная командная строка, откроется позже, когда понадобится.
• Строка состояния (самый низ) — полезная информация: язык файла, кодировка, ошибки.

Для начала нам нужен только проводник и редактор. Остальное изучим по мере необходимости.

---

Открываем первую папку проекта

VS Code работает с папками, а не с отдельными файлами. Это удобно: открываете папку — видите всё дерево файлов проекта.

Создайте папку для нашего проекта на компьютере, например my-first-site. Затем откройте её в VS Code:

• Через меню: Файл → Открыть папку (File → Open Folder)
• Через проводник: перетащите папку прямо в окно VS Code

В левой панели появится содержимое папки. Пока она пустая — это нормально, скоро мы начнём её наполнять.

---

Расширение Live Server — зачем оно нужно?

Когда вы напишете HTML-файл и откроете его в браузере двойным кликом, он откроется по такому адресу:

file:///C:/Users/your-name/my-first-site/index.html

Это называется файловый протокол (file://). Он работает для простых страниц, но у него есть ограничения:

• Каждый раз после изменения кода нужно вручную обновлять страницу в браузере.
• Некоторые браузерные функции (загрузка шрифтов, скриптов, изображений с относительными путями) работают иначе или вообще блокируются из соображений безопасности.
• Ваш сайт в продакшене всегда работает через HTTP-протокол, а не через file://. Лучше сразу привыкать к реалистичному окружению.

Live Server решает это: он запускает локальный веб-сервер прямо у вас на компьютере. Страница открывается по адресу вроде http://127.0.0.1:5500/index.html — как настоящий сайт. И главное: каждый раз, когда вы сохраняете файл, страница в браузере обновляется автоматически. Это сильно ускоряет работу — вы сразу видите результат изменений.

---

Установка Live Server

1. Откройте VS Code.
2. Перейдите в раздел расширений: нажмите на иконку с четырьмя квадратиками на боковой панели или нажмите Ctrl+Shift+X (на macOS Cmd+Shift+X).
3. В строке поиска введите Live Server.
4. Найдите расширение от автора Ritwick Dey (оно будет первым) и нажмите Install.

После установки расширения в правом нижнем углу строки состояния появится кнопка Go Live.

---

Запуск Live Server

1. Откройте HTML-файл в редакторе (или создайте пустой index.html в папке проекта).
2. Нажмите кнопку Go Live в правом нижнем углу.
3. Браузер автоматически откроется на странице http://127.0.0.1:5500/.

Теперь каждый раз, когда вы будете сохранять файл (Ctrl+S / Cmd+S), страница в браузере обновится сама. Закрыть сервер можно повторным нажатием на кнопку — она изменится обратно на Go Live.

Совет: Расположите окно VS Code и окно браузера рядом на экране. Так вы сразу будете видеть результат — слева код, справа страница.

---

Итог

• Мы установили VS Code — бесплатный и самый популярный редактор кода для веб-разработки.
• Мы можем использовать любой другой редактор — принципиальной разницы нет.
• Установили расширение Live Server, которое запускает локальный сервер и автоматически обновляет страницу при сохранении файла.

Окружение готово. В следующем уроке разберёмся с Git — системой контроля версий, которая поможет не потерять ни одной строчки кода.