Как в visual studio code запустить html
Самый простой способ — открыть папку с файлами через проводник, выбрать необходимый файл, щелкнуть по нему правой кнопкой мыши и выбрать в разделе "Открыть с помощью" VS Code. Далее можно заняться редактированием файла. Вы увидите результат вёрстки в браузере, но это не слишком удобно — при любых изменениях придётся переходить в браузер и обновлять страницу. Можно немного облегчить этот вопрос с помощью установки расширения в VS Code — Live Server. Давайте настроим всё так, чтобы наша страничка открывалась сама и обновлялась, если вы что-то изменили в разметке или стилях. Для установки расширения нужно в VS Code нажать кнопку которая откроет магазин дополнений, вбить в поиске название — и нажать Install. Другой способ — скачать Live Server из магазина расширений по ссылке выше, но это менее удобно.
После установки расширения и запуска вашего HTML-файла нужно нажать кнопку "Go live", в результате откроется окно браузера с вашей страницей. При попытке изменения файла — будет происходить автоматическое обновление страницы браузера.
Настройка VSCode для работы с HTML
В прошлых статьях ( первая часть , вторая часть ) мы рассмотрели установку среды разработки VSCode под Windows 10 и добавили в неё поддержку языка C++.
VSCode является универсальной IDE, благодаря наличию онлайн каталога с множеством расширений, позволяющих настроить среду как вам удобней. При этом её можно использовать для разработки на разных языках программирования.
Данная среда может использоваться и для разработки HTML-страниц.
Сегодня мы рассмотрим установку двух расширений Browser Preview и Live Server, которые позволяют создавать HTML-сайты не устанавливая отдельный web-сервер, и производить отладку и правку дизайна сайта не переключаясь между редактором и браузером!
Установка расширения Browser Preview
чтобы открыть окно Расширения.
Нам потребуется установить расширения Browser Preview от автора Kenneth Auchenberg.
Данное расширение позволяет вам организовывать просмотр страницы непосредственно в IDE, что очень полезно, при внесении в HTML-страницу множества мелких правок.
Также нам понадобится расширение – Live Server от Ritwick Dey.
Установка расширения Live Server
Это по сути небольшой web-сервер не требующий долгой настройки и готовый к запуску по одному щелчку на кнопку!
После установки Live Server обязательно закройте VSCode и запустите его снова.
Установка
Возможно, вам так же придется установить расширение Debugger for Chrome от Microsoft.
Создание проекта
Давайте создадим тестовый проект для нашей страницы.
Допустим, все проекты у нас будут храниться в папке d:\html
Откроем консоль cmd.exe и введем команды:
Откроется новое окно VSCode, в котором уже открыта папка проекта test1:
Добавим в нее новый файл index.html
Для этого нажмите на указанную кнопку и введите имя файла:
Щелкните на файл, чтобы открыть его в редакторе.
Давайте создадим простейшую страницу:
Проверка HTML-страницы
У нас есть проект и web-страница, пришло время её проверить.
Сначала запустим Live Server, для этого просто нажмите кнопку Go Live:
Откроется новое окно браузера и сервер будет запущен на порту
Закройте вкладку браузера, мы будем использовать Browser Preview
Создание конфигурации для запуска Browser Preview
Выберите меню Run -> Add configuration…
Выберите пункт Browser Preview
Будет создан файл launch.json замените его содержимое на:
Сохраните и закройте вкладку.
Запустите Browser Preview, для этого нажмите F5 или на указанную кнопку, она появится после первого запуска конфигурации:
.
Нажмите на «Запустить test1…»
Откроется вкладка с нашей страницей:
Работа с Browser Preview
Данное расширение очень удобно при разработке страниц с нуля, так как позволяет видеть изменения сразу после сохранения страницы.
Давайте добавим текст на страницу:
Нажмите Ctrl+S – страница будет сохранена и тут же обновиться вкладка с нашим сайтом в Browser Preview
Отладка сайта в браузере
Вы можете использовать внешний браузер для отладки сайта, запущенного в Live Server
Запустите Google Chrome и откройте в нем ссылку http://localhost:5500
Я расположил окна рядом, для большей наглядности.
Давайте добавим еще одну строку в 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.
Как запустить код в Visual Studio Code
Работа в VS Code
Один из самых популярных редакторов исходного кода Visual Studio Code очень удобен для начинающих. Удобный интерфейс и расширенные возможности привлекают как начинающих, так и опытных программистов.
Если вы новичок в VS Code и ищете упрощенное руководство по запуску кода, вы попали по адресу. Мы расскажем вам о настройке необходимого программного обеспечения и выполнении кода с использованием знакомых языков, таких как C/C++ и Python.
Запуск C++ кода
- Откройте VS Code.
- Выберите значок просмотра расширений на панели активности или используйте комбинацию клавиш (Ctrl+Shift+X).
- Введите в строку поиска ‘C++’.
- Установите плагин.
После установки расширения, при открытии или создании *.cpp файла у вас будет подсветка синтаксиса, интеллектуальные завершения (IntelliSense), а также проверка ошибок.
Установка компилятора
C++ — компилируемый язык, то есть исходный код программы должен быть переведен (скомпилирован), прежде чем он будет запущен на компьютере. VS Code — это, прежде всего, редактор, и для выполнения большей части рабочего процесса разработки он полагается на инструменты командной строки. Расширение C/C++ не включает компилятор C++ или отладчик. Нужно будет установить эти инструменты или использовать уже установленные на вашем компьютере.
Возможно, компилятор и отладчик C++ уже есть в вашей учебной или рабочей среде разработки. Узнайте у своих преподавателей или коллег, как установить рекомендуемый набор инструментов C++ (компилятор, отладчик, проектную систему, линтер).
На некоторых платформах, таких как Linux или macOS, компилятор C++ уже установлен. В большинстве дистрибутивов Linux установлен GNU Compiler Collection (GCC), а пользователи macOS могут получить инструменты Clang вместе с Xcode.
- Установите MinGW
- Выберите нужный компилятор, потом перейдите в вкладку installation и нажмите apply change для сохранения настроек. Компилятор начнет скачиваться.
Где main.cpp — имя вашего файлы.
При сохранении файла, копилятор скомпилирует программу и можно будет запустить ее в терминале.
Видеоинструкция для подробного ознакомления
Запуск Python кода
Простой способ запуска Python и он не требует никакой настройки:
Установите расширение Code Runner .
Откройте файл кода Python в текстовом редакторе.
Чтобы запустить код Python:
- используйте сочетание клавиш Ctrl + Alt + N;
- или нажмите F1, а затем выберите Run Code (Запуск кода);
- или щелкните правой кнопкой мыши в текстовом редакторе и выберите Run Code в контекстном меню редактора;
- или нажмите кнопку Run Code в меню заголовка редактора.
Чтобы остановить запущенный код:
- используйте сочетание клавиш Ctrl + Alt + M
- или нажмите F1, а затем выберите Stop Code Run
- или щелкните правой кнопкой мыши на выходном канале и выберите Stop Code Run в контекстном меню.
Если вы хотите добавить путь к Python, вы можете перейти в меню Файл → Предпочтения → Настройки и добавить путь к Python, как показано ниже:
«code-runner.executorMap»:
<
«python»: «\»C:\\\Program Files\\\\Python35\\\python.exe\» -u»
>
Если вы уже установили расширение Python и вручную настроили интерпретатор, вы можете настроить ваш файл settings.json следующим образом:
<
«python.pythonPath»: «C:\\\\python36\\\\python36.exe»,
«code-runner.executorMap»:
<
«python»: «$pythonPath -u $fullFileName».
>
>
Как запустить HTML, JS
Html файл вы можете открыть с помощью браузера, VS code может только редактировать содержимое документа.
How to run HTML in Visual Studio Code
The extensions: HTML Preview, Live Server and open in browser
You might use Visual Studio Code (VSC) as the editor for coding. Have you faced the problem to review HTML files lively in VSC?
I have tried three extensions and would like to share my experiences.
- HTML Preview
HTML Preview can open the rendered web page inside VSC lively.
Once the below version HTML Preview (as pic1)is being installed, there will have an icon named “ Open Preview to the side” as pic 2 displayed in the editor.
The result can be displayed lively in VSC. But I face a problem to change the background color of the Preview. Let’s say: keep the editor as black, but Preview as white, like that. Please feel free to make comments if you have any ideas. Thanks.
Live Server can launch a development local Server with live reload feature for static & dynamic pages.
Once the extension is installed, the icon “Go Live” displays at the bottom as below pic4:
Choose the HTML file, click Go Live, it will be opened at a development local Server with 127.0.0.1:5500 as below.
The windows can be arranged as below, which can help me check the result lively.
3. open in browser
Once the extension is being installed, write click the file, you will find there are two items being added to the dropdown menu: Open in Default Browser and Open in Other Browsers. Click it, the file will be opened in pop-up windows.
The display with this extension can’t display lively, and it has to be refreshed once changes happen in the HTML file, as shown below: the HTML has been changed to “hello!”, the display doesn’t change automatically. But this is my experience, if there is anything wrong, please feel free to make comments.