Настройка VSCode для работы с HTML
В прошлых статьях ( первая часть , вторая часть ) мы рассмотрели установку среды разработки 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 Для этого нажмите на указанную кнопку и введите имя файла: 
Щелкните на файл, чтобы открыть его в редакторе. Давайте создадим простейшую страницу:
Тестовый проект 1 Это тест!
Проверка HTML-страницы
У нас есть проект и web-страница, пришло время её проверить. Сначала запустим Live Server, для этого просто нажмите кнопку Go Live: Откроется новое окно браузера и сервер будет запущен на порту
5500
Закройте вкладку браузера, мы будем использовать Browser Preview
Создание конфигурации для запуска Browser Preview
Выберите меню Run -> Add configuration… Выберите пункт Browser Preview Будет создан файл launch.json замените его содержимое на:
Сохраните и закройте вкладку. Запустите Browser Preview, для этого нажмите F5 или на указанную кнопку, она появится после первого запуска конфигурации: 
Откроется окно: 
. Нажмите на «Запустить test1…» Откроется вкладка с нашей страницей: 
Работа с Browser Preview
Данное расширение очень удобно при разработке страниц с нуля, так как позволяет видеть изменения сразу после сохранения страницы. Давайте добавим текст на страницу:
Тестовый проект 1 Это тест!
1234 А это новый текст.
Нажмите Ctrl+S – страница будет сохранена и тут же обновиться вкладка с нашим сайтом в Browser Preview
Отладка сайта в браузере
Вы можете использовать внешний браузер для отладки сайта, запущенного в Live Server Запустите Google Chrome и откройте в нем ссылку http://localhost:5500 Я расположил окна рядом, для большей наглядности. Давайте добавим еще одну строку в html-файл:
Тестовый проект 1 Это тест!
1234 А это новый текст.
А этот текст еще новее.
Сохраним файл – содержимое обновится и в браузере, и во вкладке Browser Preview.
Как запустить код в VS Code?
Взялся изучать JS , установил VS Code . Написал код, однако запустить его не могу. Нажимаю отладка, запуск без отладки, и выдается ошибка. Вопрос: как запустить код в VS Code ?
- javascript
- visual-studio-code
Отслеживать
3,778 2 2 золотых знака 15 15 серебряных знаков 35 35 бронзовых знаков
задан 10 июл 2019 в 14:28
PythonLearner4823 PythonLearner4823
101 1 1 золотой знак 2 2 серебряных знака 9 9 бронзовых знаков
Ошибка какая.
10 июл 2019 в 15:00
@Dmitry Что то вроде этого [Running] node «c:\Users\Admin\Desktop\java.js» «node» �� ���� ����७��� ��� ���譥� ��������, �ᯮ��塞�� �ணࠬ��� ��� ������ 䠩���.
10 июл 2019 в 15:02
если не париться, то рядом положить файлик html и в нем подключить скрипт. запускаете html в браузере и скрипт работает. Или вы кроме скрипта js еще что-то юзаете?
26 сен 2019 в 9:48
можно ещё поставить расширение marketplace.visualstudio.com/… но это так для не сложных вычислений
4 дек 2019 в 9:01
4 ответа 4
Сортировка: Сброс на вариант по умолчанию
В вопросе не указана ОС. Если Windows, то:
- Установить Node.js
- Установить расширение Code Runner для VS Code
- Перезапустить VS Code
- В VS Code в правом верхнем углу нажать запуск (Run Code) или Ctrl + Alt + N
В большинстве случаев никакие конфигурационные файлы править не нужно.
Также обратите внимание, что привычное для руководств alert(«Hello World»); работать не будет, попробуйте console.log(«Hello World»);
Отслеживать
ответ дан 4 дек 2019 в 8:54
Pavel Kudryavtcev Pavel Kudryavtcev
51 1 1 серебряный знак 3 3 бронзовых знака
Установить Node.js.
Создать файл file.js
Открыть терминал Ctrl + ~
Запустить команду node file.js .
P.S. По-умолчанию команда ищет файл от корня папки (workspace), которая открыта в vscode.
Отслеживать
ответ дан 28 окт 2019 в 13:09
1,811 1 1 золотой знак 9 9 серебряных знаков 29 29 бронзовых знаков
Ну тут есть несколько способов.
1) Скачиваете расширение Debugger for Chrome — должен появиться файл launch.json. Или он вместе с vs устанавливается, уже не помню. но он будет 100%.
Указываете url как на картинке(путь к файлу, который вы собираетесь запустить). Создаёте базовый html и вставляете туда скрипт.
2) Способ похож на предыдущий, но немного лучше: надо скачать node js. Установка в несколько пунктов(загуглите). Запустить localhost. Тут уже никаких путей к файлу указывать не надо.
3) Установить расширение code runner, выделить код в файле и нажать ctrl + alt + n. У меня этот способ почему-то не работает.
Как запускать просмотр в браузере в Visual Studio Code
нажимаю F5
cannot launch programm setting the ‘outfiles’ attgibute might help.
1 2 3 4 5 6 7 8 9 10
"version": "0.2.0", "configurations": [ { "type": "node", "request": "launch", "name": "Launch Program", "program": "$" } ] }
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:
Зачем для создания формы на Angular использовать Visual Studio и Visual Studio Code?
Мне нужно написать форму на ангуляре, которая будет выполнять Select, Insert,Delete из базы данных.
Чем отличается Visual Studio Community и Visual Studio Code?
в чем разница Visual Studio Code или Visual Studio Community. Описание на англиском где я полный.
Как русифицировать Visual Studio Code?
Всем привет, подскажите как русифицировать Visual Studio Code? Почему я решил что это возможно.
Как компилировать в Visual Studio Code?
Извиняюсь за нубство, но уже битый час не могу разрешить следующую проблему : установила, значит, я.
Урок 1. Начало работы с Visual Studio Code. Создание дизайна страниц
В процессе выполнения всех уроков, вами будет создан полноценный веб-сайт юридической конторы.
Структура веб-страниц представлена на рисунке 1.
1 — Структура итогового веб-сайта
Цель: ознакомиться с Visual Studio Code, а так же создать страницу с дизайном для всего сайта.
– Исследовать рабочую область.
– Научиться создавать новую страницу, используя содержимое HTML5, CSS.
– Научиться сохранять документ.
– Научиться изменять название страницы и текстовые заголовки.
– Научиться добавлять изображения на передний план и в качестве фоновых изображений.
В результате выполнения данного урока у вас должна получиться такая веб-страница (рисунок 1.1):
Рисунок 1.1 — Предварительный просмотр веб-страницы
Подготовка к созданию проекта, изучение редактора Visual Studio Code. (Установка Visual Studio Code)
Для создания проекта «Юридическая контора «Советник»» нам понадобится рабочая папка под проект.
Создайте папку на локальном диске посредствам проводника или другого файлового менеджера.
Для реализации проекта в качестве редактора вы будете использовать современный инструмент — Visual Studio Code.
Visual Studio предлагает общедоступные инструменты и гибкость, необходимые для создания и развертывания современных веб-приложений.
– HTML5, CSS3, LESS/SASS, JavaScript
– ASP.NET, Node.js, Python, JavaScript
– NuGet, Grunt, Gulp, Bower, npm.
– Платформа и среда выполнения с открытым кодом.
– Развертывание в Windows, Azure, Mac или Linux.
– Бесплатно для небольших групп и разработчиков открытого кода.
– Запустите Visual Studio Code. В боковой панели навигации кликните по иконке страниц.(рисунок 1.2).
1.2 — Боковая панель
– В появившемся меню, кликните на кнопку Открыть папку и в открывшемся окне выберите созданную заранее папку Sovetnik. Кликните кнопку Выбор папки.
1.3 — Боковая панель. Выбранная папка
– Для создания первой страницы сайта design.html наведите мышку на область названия папки(проекта) SOVETNIK и кликните значок . В появившейся форме введите design.html
1.4 — Создан файл design.html
Наполнение папки Sovetnik
Для создания проекта, нам понадобятся дополнительные файлы: CSS, JS, мультимедиа.
– Для этого скачайте в созданную вами папку, папки и файлы из папки work_files.
1.5 — Папка Sovetnik
– Откройте редактор. Папки появились в навигационном меню проекта. Они будут задействованы позже.
1.6 — Название страницы
Создание дизайна сайта.
Для создания дизайна сайта нами будет подключен файл CSS, в котором указаны свойства для элементов HTML5. Изучение CSS в данном электронном учебном пособии не предусмотрен.
– Заполните файл design.html согласно стандартной структуре HTML5 документа, как на рисунке 1.7:
1.7 — Стандартная структура
– Между тегами title введите название страницы ЮК Советник (рисунок 1.8).
1.8 — Название страницы
– Следующим шагом будут meta и link данные. Между тегами head добавьте следующие строки (рисунок 1.9):
1.9 — Добавлены meta и link данные
Данным кодом вы к файлу design.html подключили css файл со свойствами для элементов HTML5, а так же meta name=»viewport» для того ,что бы сообщить браузеру, что ваша страница предназначена для правильного поведения области просмотра как на персональных компьютерах ,так и на мобильных устройствах.
– Для отображения страницы как на примере, нужно прописать id для тэгов и разделительную полосу при помощи тега hr.
1.10 — Выделеные области нужно добавить на свою страницу.
– Добавим логотип на страницу. Логотип у вас используется в формате SVG, если же у пользователя поддерка SVG не предусмотрена браузером выводиться будет альтернативное изображения в формате PNG.
Вся область логотипа и подпись снизу будет обернута DIV с именем center для того, что бы все объекты внутри распологались по центру. Клик по картинке будет переводить вас на главную страницу сайта (рисунок 1.11).
1.11 — Код добавления логотипа на страницу.
1.12 — Логотип технологии SVG и формата PNG.
– Следующим шагом будет создание навигации на сайте. Стиль навигации уже прописан в CSS файле. Вам осталось добавить ссылки между тегоми nav. В конце добавим div clearfix. Clearfix — метод отмены действия float без изменения структуры HTML-документа (рисунок 1.13).
1.13 — Код ссылок для вставки навигации
– Добавьте копирайт в подвал сайта между тегами footer (рисунок 1.14).
1.14 — Добавлены meta и link данные
– Дизайн готов. Добавим обзац с текстом Контент, для визуального восприятия области для контента.
1.15 — Выделеные области нужно добавить на свою страницу.
Поздравляем! Вы создали свою первую веб-страницу на HTML5 (рисунок 1.16): добавили текст и цвета, добавили изображения и подключили CSS, а также быстро создали профессиональную веб-страницу. Вы выполнили предварительный просмотр страницы в браузере (рисунок 1.16).
1.16 — Предварительный просмотр веб-страницы
Контрольные вопросы
1. Какой редактор используется в уроках для редактирования страниц HTML5?
2. Между какими тегами размещается пара тегов ?
3. Какой метатег сообщает браузеру, что сайт предназначен для просмотра как на персональных компьютерах, так и на мобильных устройствах?
4. При добавлении логотипа была использована технология SVG, что будет отображаться браузером, если браузер не поддерживает SVG?
5. Между какими тегами распологаются ссылки навигационного меню сайта?
Создание сайта на HTML5
- Урок 1. Начало работы с Visual Studio Code. Создание дизайна страниц
- Урок 2. Создание главной страницы сайта
- Урок 3. Создание страницы «Услуги и цены»
- Урок 4. Создание страниц «Гражданам», «Юридическим лицам»
- Урок 5. Создание страницы «Вопросы-ответы»
- Урок 6. Создание страницы «Контакты»
- Установка Visual Studio Code