В прошлых статьях (первая часть, вторая часть) мы рассмотрели установку среды разработки VSCode под Windows 10 и добавили в неё поддержку языка C++.
VSCode является универсальной IDE, благодаря наличию онлайн каталога с множеством расширений, позволяющих настроить среду как вам удобней. При этом её можно использовать для разработки на разных языках программирования.
Данная среда может использоваться и для разработки HTML-страниц.
Сегодня мы рассмотрим установку двух расширений Browser Preview и Live Server, которые позволяют создавать HTML-сайты не устанавливая отдельный web-сервер, и производить отладку и правку дизайна сайта не переключаясь между редактором и браузером!
Установка расширения Browser Preview
Нажмите
Ctrl+Shit+X
чтобы открыть окно Расширения.
Нам потребуется установить расширения Browser Preview от автора Kenneth Auchenberg.
Данное расширение позволяет вам организовывать просмотр страницы непосредственно в IDE, что очень полезно, при внесении в HTML-страницу множества мелких правок.
Также нам понадобится расширение – Live Server от Ritwick Dey.
Установка расширения Live Server
Это по сути небольшой web-сервер не требующий долгой настройки и готовый к запуску по одному щелчку на кнопку!
После установки Live Server обязательно закройте VSCode и запустите его снова.
Установка
Возможно, вам так же придется установить расширение Debugger for Chrome от Microsoft.
Создание проекта
Давайте создадим тестовый проект для нашей страницы.
Допустим, все проекты у нас будут храниться в папке d:\html
Откроем консоль cmd.exe и введем команды:
d:
mkdir d:\html\test1
cd d:\html\test1
code .
Откроется новое окно VSCode, в котором уже открыта папка проекта test1:
Добавим в нее новый файл index.html
Для этого нажмите на указанную кнопку и введите имя файла:
Щелкните на файл, чтобы открыть его в редакторе.
Давайте создадим простейшую страницу:
<html>
<head>
<title>Тестовый проект 1</title>
</head>
<body>
<h1>Это тест!</h1>
</body>
</html>
Проверка HTML-страницы
У нас есть проект и web-страница, пришло время её проверить.
Сначала запустим Live Server, для этого просто нажмите кнопку Go Live:
Откроется новое окно браузера и сервер будет запущен на порту
5500
Закройте вкладку браузера, мы будем использовать Browser Preview
Создание конфигурации для запуска Browser Preview
Выберите меню Run -> Add configuration…
Выберите пункт Browser Preview
Будет создан файл launch.json замените его содержимое на:
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "browser-preview",
"request": "launch",
"name": "Запустить test1",
"url": "http://localhost:5500"
}
]
}
Сохраните и закройте вкладку.
Запустите Browser Preview, для этого нажмите F5 или на указанную кнопку, она появится после первого запуска конфигурации:
Откроется окно:
.
Нажмите на «Запустить test1…»
Откроется вкладка с нашей страницей:
Работа с Browser Preview
Данное расширение очень удобно при разработке страниц с нуля, так как позволяет видеть изменения сразу после сохранения страницы.
Давайте добавим текст на страницу:
<html>
<head>
<title>Тестовый проект 1</title>
</head>
<body>
<h1>Это тест!</h1>
1234
<p>А это новый текст.<p/>
</body>
</html>
Нажмите Ctrl+S – страница будет сохранена и тут же обновиться вкладка с нашим сайтом в Browser Preview
Отладка сайта в браузере
Вы можете использовать внешний браузер для отладки сайта, запущенного в Live Server
Запустите Google Chrome и откройте в нем ссылку http://localhost:5500
Я расположил окна рядом, для большей наглядности.
Давайте добавим еще одну строку в html-файл:
<html>
<head>
<title>Тестовый проект 1</title>
</head>
<body>
<h1>Это тест!</h1>
1234
<p>А это новый текст.<p/></p>
<p>А этот текст еще новее.<p/>
</body>
</html>
Сохраним файл – содержимое обновится и в браузере, и во вкладке Browser Preview.
Заключение
Сегодня мы рассмотрели настройку среды разработки VSCode для разработки HTML-страниц.
Мы установили расширения Browser Preview и Live Server.
Создали тестовую страницу.
Настроили профиль для запуска нашей страницы в Browser Preview.
Открыли нашу страницу во вкладке Browser Preview и протестировали автоматическое обновление содержимого вкладки при обновлении содержимого HTML-страницы.
Открыли нашу страницу в Google Chrome используя ссылку от Live Server - http://localhost:5500
Протестировали обновление страницы в Google Chrome при обновлении содержимого файла.
В следующей статье мы рассмотрим настройку VSCode для разработки на языке программирования PHP.
