Как открыть в браузере из VS Code

Если вы используете файлы HTML, PHP или JS, вы можете открыть их в браузере из Visual Studio Code. Однако интегрированной возможности для этого нет. Это может раздражать, особенно если вы хотите быстро просмотреть результат кодирования.

К счастью, вы можете включить опцию “Открыть в браузере” функционировать другими методами. Эта статья покажет вам, как это сделать.

Как открыть в браузере в VS Code на ПК с Windows

Самый простой способ получить параметр «Открыть в браузере» для кода Visual Studio в Windows — использовать расширение. Установка расширений в Visual Studio Code относительно проста, как и использование их для открытия файлов в браузере.

Откройте файл HTML в Visual Studio Code. Редактор.
На крайней левой вертикальной панели инструментов нажмите “Расширения” Кроме того, вы можете использовать сочетание клавиш “Ctrl + Shift + X” для запуска расширений.
Нажмите на строку поиска, чтобы включить запись.
Введите “открыть в браузере” Выберите расширение, соответствующее вашему поисковому запросу.
Нажмите кнопку “Установить” кнопку.
Перезагрузите программу.
Выберите проводник на левой панели инструментов.
Найдите свой HTML-файл в проводнике и щелкните его правой кнопкой мыши. Выберите “Открыть в браузере по умолчанию” или “Открыть в других браузерах”
Если вы выберете “Открыть в браузере по умолчанию” опция, файл HTML будет запущен в любом браузере, установленном по умолчанию. Если вы выберете “Открыть в других браузерах” вам нужно будет указать, какой браузер будет использоваться.

Вы можете найти множество полезных расширений в Visual Studio Marketplace. Или вы можете получить расширения «Открыть в браузере» с самыми положительными отзывами пользователей здесь: Расширение 1, Расширение 2, Расширение 3, Расширение 4.

Как открыть в браузере в VS Code на Mac

Visual Studio Code можно обновлять с помощью различных расширений, расширяющих функциональные возможности программы. Один тип расширения позволяет открывать файлы HTML, PHP или JS в браузере по умолчанию или в другом браузере. Вот как включить этот параметр на Mac.

В редакторе кода Visual Studio откройте нужный файл.
Перейдите на панель инструментов слева и выберите “Расширения”. br>
Нажмите на строку поиска на панели расширений и напишите “open в браузере”
Выберите расширение и нажмите “ Установить.”
Перезагрузите программное обеспечение.
Перейдите на левую панель инструментов и выберите Проводник.
Найдите файл, который вы хотите открыть в панели проводника и щелкните правой кнопкой мыши на нем. Выберите либо “Открыть в браузере по умолчанию” или “Открыть в других браузерах”
Кнопка “Открыть в браузере по умолчанию” опция запустит файл с помощью предварительно выбранного браузера. “Открыть в других браузерах” появится запрос, в котором вы сможете выбрать один из браузеров, установленных на вашем компьютере.

Visual Studio Marketplace предлагает широкий выбор расширений, которые могут добавлять новые функции в Visual Studio Code. Веб-сайт стоит изучить, если вы хотите дополнительно настроить программу. И если вас интересуют исключительно расширения «Открыть в браузере», вот несколько советов: расширение 1, расширение 2, расширение 3, расширение 4.

Открыть в браузере ярлык

Почти каждое расширение «Открыть в браузере» для Visual Studio Code поставляется с включенными сочетаниями клавиш. Однако ярлыки неоднородны. Вместо этого каждое расширение имеет определенную комбинацию клавиш, которая активирует открытие файла в вашем браузере.

Вот сочетания клавиш для расширений, предложенных в этой статье.

Расширение 1: “Ctrl + 1” в Windows “Command + 1” на Mac.
Расширение 2: “Ctrl + Alt + O” в Windows “Command + Option (Alt) + O” на Mac.
Расширение 3: “Ctrl + Shift + F9” в Windows “Command + Shift + F9” на Mac.
Расширение 4: “Ctrl + Shift + P” в Windows “Command + Shift + P” на Mac.

Обратите внимание, что эти ярлыки будут работать только с соответствующими расширениями, на которые есть ссылки в этой статье. Если вы решите установить другое расширение, соответствующие ярлыки, скорее всего, будут перечислены на его странице Marketplace.

Запуск HTML в Visual Studio Code

Если вас интересует работа с HTML в Visual Studio Code, вот несколько способов запуска HTML-кода в программе.

Первый способ заключается в ручной загрузке файла, который вы хотите запустить.

Откройте Visual Studio Code и создайте новый HTML-файл.
Перейдите к “Файл” затем нажмите “Сохранить».
Используя HTML:5, активируйте шаблон для HTML. Затем откройте файл, сохраненный на шаге 2.
Используйте Откройте в браузере расширение, которое вы установили ранее, чтобы запустить файл в браузере.
Оставив браузер открытым, вернитесь в Visual Studio Code и отредактируйте HTML-файл, сохранив изменения.
Вернитесь в браузер и нажмите «Обновить». Вы должны увидеть изменение страницы в зависимости от вашего редактирования.
Повторите шаги 5 и 6, чтобы проверить свой прогресс, продолжая редактировать HTML-файл.

Ручной метод может помочь отслеживать вашу работу. Однако есть еще лучшее решение: автозагрузка. Этот вариант потребует от вас установки другого расширения, но оно того стоит.

В Visual Studio Code перейдите в раздел Расширения, расположенный в внизу левой панели инструментов.
В строке поиска расширений введите на “действующем сервере”
Нажмите кнопку “Установить” рядом с расширением Live Server.
Создайте и сохраните новый HTML-файл.
В обозревателе кода Visual Studio щелкните правой кнопкой мыши новый файл. Выберите “Открыть Live Server”
Файл HTML откроется в браузере. Как только это произойдет, попробуйте отредактировать HTML-код. Сохраните свой прогресс.
Как только вы создадите изменение в коде и сохраните его, ваш браузер должен обновиться, показывая новый контент. Вам не нужно будет обновлять страницу вручную, вместо этого вы сможете получить визуальное подтверждение изменений в режиме реального времени.

Другие полезные HTML-расширения кода Visual Studio

Как уже упоминалось, Visual Studio Marketplace полон отличных инструментов, многие из которых ориентированы на HTML. Вот десять самых полезных и высоко оцененных расширений для HTML.

lit-plugin: инструмент, который подсвечивает синтаксис, проверяет ввод и помогает завершить код без ошибок. Это расширение имеет настраиваемые правила.
SCSS Everywhere: расширение для автоматического заполнения определений классов для файлов HTML, SCSS, Elixir, SASS, PHP, CSS и многих других типов файлов.
li>
Angular Snippets: Добавляет Angular-сниппеты для удобного использования в HTML и TypeScript. Расширение работает, разворачивая фрагмент после того, как он частично напечатан.
ES6 String HTML: включает поддержку строкового кода es6 для подсветки синтаксиса. Работает с HTML, CSS, XML, GLSL и другими форматами.
Разделить атрибуты HTML: это расширение разделит атрибуты HTML, а также реквизиты и директивы Angular, Vue и React. Вы можете использовать его для открывающихся и самозакрывающихся тегов, а также для множественного выбора.
Djaneiro – Django Snippets: Обширная коллекция фрагментов для HTML-шаблонов django. Использование этого расширения значительно сократит время, затрачиваемое на набор текста.
Live Preview: расширение Live Preview от Microsoft позволяет размещать локальный сервер. Если у вас есть проект, в котором не используются Angular, React или другие серверные инструменты, это расширение позволит выполнять обычный и встроенный предварительный просмотр HTML с обновлением страницы в режиме реального времени.
Oracle JET Core : это расширение, созданное корпорацией Oracle, обеспечивает полную поддержку пользовательских HTML-данных Oracle JET. Включенные фрагменты будут автоматически заполнять любые атрибуты и теги JET.
CSS-навигация: позволяет перейти к определению для HTML в CSS, HTML в Less и HTML в Sass. Команда Peek Definition также включена.
Конвертер символов с диакритическими знаками HTML: легко заменяет специальные символы соответствующими объектами HTML. Это расширение полезно в определенных ситуациях, но необходимо при работе с локализуемыми строками.

Вы можете запускать код Visual Studio из своего браузера

Помимо запуска HTML-файлов в браузере, также можно использовать весь код Visual Studio онлайн. Для этого вам нужно запустить определенную версию программы, разработанную для использования в браузере.

Стоит отметить, что эта версия намного легче по сравнению с Visual Studio Code для настольных компьютеров. Однако это может быть простое решение для удобной навигации по репозиторию и файлам, а также для внесения незначительных изменений в код.

Если вы хотите попробовать вариант браузера Visual Studio Code, вы можете сразу приступить к работе, нажмите здесь.

Подготовьте свои HTML-файлы и запустите их

Открытие HTML-файлов в браузере стало проще благодаря специальному расширению для Visual Studio Code. Если вы решите изучить обширные предложения расширений для этого инструмента кодирования, функция «Открыть в браузере» станет лишь началом вашего пути.

Удалось ли вам открыть HTML-файл в выбранном вами браузере? Какое расширение вы использовали? Дайте нам знать в разделе комментариев ниже.