Пятница, 05 марта 2021 16:26

Настройка VSCode для работы с HTML

Россия
Оцените материал
(0 голосов)

В прошлых статьях (первая часть, вторая часть)  мы рассмотрели установку среды разработки VSCode под Windows 10 и добавили в неё поддержку языка C++.

VSCode является универсальной IDE, благодаря наличию онлайн каталога с множеством расширений, позволяющих настроить среду как вам удобней. При этом её можно использовать для разработки на разных языках программирования.

Данная среда может использоваться и для разработки HTML-страниц.

Сегодня мы рассмотрим установку двух расширений Browser Preview и Live Server, которые позволяют создавать HTML-сайты не устанавливая отдельный web-сервер, и производить отладку и правку дизайна сайта не переключаясь между редактором и браузером!

Установка расширения Browser Preview

Нажмите

Ctrl+Shit+X

чтобы открыть окно Расширения.

Нам потребуется установить расширения Browser Preview от автора Kenneth Auchenberg.

2021-03-05_10-31-24.png

Данное расширение позволяет вам организовывать просмотр страницы непосредственно в IDE, что очень полезно, при внесении в HTML-страницу множества мелких правок.

Также нам понадобится расширение – Live Server от Ritwick Dey.

Установка расширения Live Server

Это по сути небольшой web-сервер не требующий долгой настройки и готовый к запуску по одному щелчку на кнопку!

2021-03-05_11-52-30.png

После установки Live Server обязательно закройте VSCode и запустите его снова.

Установка 

Возможно, вам так же придется установить расширение Debugger for Chrome от Microsoft.

Создание проекта

Давайте создадим тестовый проект для нашей страницы.

Допустим, все проекты у нас будут храниться в папке d:\html

Откроем консоль cmd.exe и введем команды: 

d:
mkdir d:\html\test1
cd d:\html\test1
code .

Откроется новое окно VSCode, в котором уже открыта папка проекта test1:

2021-03-05_10-36-30.png

Добавим в нее новый файл index.html

Для этого нажмите на указанную кнопку и введите имя файла:

2021-03-05_10-46-51_2.png

Щелкните на файл, чтобы открыть его в редакторе.

Давайте создадим простейшую страницу:

<html>

<head>
    <title>Тестовый проект 1</title>
</head>

<body>
    <h1>Это тест!</h1>
</body>

</html>

Проверка HTML-страницы

У нас есть проект и web-страница, пришло время её проверить.

Сначала запустим Live Server, для этого просто нажмите кнопку Go Live:

2021-03-05_11-57-00.png

Откроется новое окно браузера и сервер будет запущен на порту

5500

2021-03-05_11-57-39.png 

Закройте вкладку браузера, мы будем использовать Browser Preview

Создание конфигурации для запуска Browser Preview

Выберите меню Run -> Add configuration…

2021-03-05_10-58-37.png

Выберите пункт 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 или на указанную кнопку, она появится после первого запуска конфигурации:

2021-03-05_12-02-47.png 

Откроется окно:

 2021-03-05_12-10-57.png.

Нажмите на «Запустить test1…»

Откроется вкладка с нашей страницей:

2021-03-05_12-13-15.png

Работа с Browser Preview

Данное расширение очень удобно при разработке страниц с нуля, так как позволяет видеть изменения сразу после сохранения страницы.

Давайте добавим текст на страницу:

<html>

<head>
    <title>Тестовый проект 1</title>
</head>

<body>
    <h1>Это тест!</h1>
    1234
    <p>А это новый текст.<p/></p>
</body>

</html>

Нажмите Ctrl+S – страница будет сохранена и тут же обновиться вкладка с нашим сайтом в Browser Preview

2021-03-05_12-16-18.png

Отладка сайта в браузере

Вы можете использовать внешний браузер для отладки сайта, запущенного в 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.

2021-03-05_12-21-30.png

Заключение

Сегодня мы рассмотрели настройку среды разработки VSCode для разработки HTML-страниц.

Мы установили расширения Browser Preview и Live Server.

Создали тестовую страницу.

Настроили профиль для запуска нашей страницы в Browser Preview.

Открыли нашу страницу во вкладке Browser Preview и протестировали автоматическое обновление содержимого вкладки при обновлении содержимого HTML-страницы.

Открыли нашу страницу в Google Chrome используя ссылку от Live Server - http://localhost:5500

Протестировали обновление страницы в Google Chrome при обновлении содержимого файла.

В следующей статье мы рассмотрим настройку VSCode для разработки на языке программирования PHP.

Прочитано 1664 раз Последнее изменение Пятница, 05 марта 2021 20:58
Другие материалы в этой категории: « Установка поддержки C++ в Visual Studio Code (VSCode)