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

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

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

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

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

1. Откройте HTML-файл в редакторе кода Visual Studio .
   
2. На крайней левой вертикальной панели инструментов нажмите «Расширения». Кроме того, вы можете использовать сочетание клавиш «Ctrl + Shift + X» для запуска расширений.
   
3. Нажмите на строку поиска, чтобы включить запись.
   
4. Введите «открыть в браузере». Выберите расширение, соответствующее вашему поисковому запросу.
   
5. Нажмите кнопку «Установить».
   
6. Перезагрузите программу.
7. Выберите Проводник на левой панели инструментов.
   
8. Найдите свой HTML-файл в проводнике и щелкните его правой кнопкой мыши. Выберите «Открыть в браузере по умолчанию» или «Открыть в других браузерах».
   
9. Если вы выберете опцию «Открыть в браузере по умолчанию», файл HTML будет запущен в любом браузере, установленном по умолчанию. Если вы выберете «Открыть в других браузерах», вам нужно будет указать, какой браузер будет использоваться.

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

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

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

1. С помощью редактора кода Visual Studio откройте нужный файл.
   
2. Перейдите на панель инструментов слева и выберите «Расширения».
   
3. Нажмите на строку поиска на панели расширений и напишите «открыть в браузере».
   
4. Выберите расширение и нажмите «Установить».
   
5. Перезагрузите программное обеспечение.
6. Перейдите на левую панель инструментов и выберите Проводник.
   
7. Найдите файл, который вы хотите открыть, на панели проводника и щелкните его правой кнопкой мыши. Выберите «Открыть в браузере по умолчанию» или «Открыть в других браузерах».
   
8. Параметр «Открыть в браузере по умолчанию» запустит файл с использованием предварительно выбранного браузера. «Открыть в других браузерах» вызовет приглашение, в котором вы сможете выбрать один из браузеров, установленных на вашем компьютере.
   

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

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

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

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

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

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

Запуск HTML в коде Visual Studio

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

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

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

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

1. В Visual Studio Code перейдите в раздел «Расширения», расположенный в нижней части левой панели инструментов.
   
2. В строке поиска расширений введите «живой сервер».
   
3. Нажмите кнопку «Установить» рядом с расширением Live Server.
   
4. Создайте и сохраните новый файл HTML.
   
   
5. В обозревателе кода Visual Studio щелкните правой кнопкой мыши новый файл. Выберите «Открыть Live Server».
   
6. HTML-файл откроется в браузере. Как только это произойдет, попробуйте отредактировать HTML-код. Сохраните свой прогресс.
   
   
7. Как только вы создадите изменение в коде и сохраните его, ваш браузер должен обновиться, показывая новый контент. Вам не нужно будет обновлять страницу вручную, вместо этого вы сможете визуально подтверждать изменения в режиме реального времени.
   

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

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

• lit-plugin : инструмент, который подсвечивает синтаксис, проверяет ввод и помогает завершить код без ошибок. Это расширение имеет настраиваемые правила.
• SCSS Everywhere : расширение автозаполнения для определений классов для HTML, SCSS, Elixir, SASS, PHP, CSS и многих других типов файлов.
• 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-файл в выбранном вами браузере? Какое расширение вы использовали? Дайте нам знать в комментариях ниже.