Как открыть preview в visual studio code

Обновлено: 07.07.2024

Как я могу просмотреть свой HTML-код в браузере с помощью нового кода Microsoft Visual Studio?

С Notepad ++ у вас есть возможность запустить в браузере. Как я могу сделать то же самое с кодом Visual Studio?

У меня работало расширение живого сервера. Я не хочу настраивать какие-либо файлы для этого.

Для Windows - Откройте браузер по умолчанию - Протестировано на VS Code v 1.1.0

Ответьте на оба вопроса, чтобы открыть определенный файл (имя жестко запрограммировано) ИЛИ открыть ЛЮБОЙ другой файл.

шаги:

Используйте ctrl + shift + p (или F1 ), чтобы открыть палитру команд.

Введите Tasks: Configure Task или на старых версиях Configure Task Runner . Выбор этого файла откроет файл tasks.json . Удалите отображаемый скрипт и замените его следующим:

Не забудьте изменить раздел «args» файла tasks.json на имя вашего файла. Это всегда откроет этот конкретный файл, когда вы нажмете F5.

Вы также можете установить this для открытия любого файла, который вы открыли в данный момент, используя ["$"] в качестве значения «args». Обратите внимание, что $ выходит за пределы <. >, так что [""] это неправильно.

Вернитесь к html-файлу (в данном примере это «text.html») и нажмите ctrl + shift +, b чтобы просмотреть свою страницу в веб-браузере.

Как мне это сделать в Mac? Там нет exe-файлов. Я хотел бы открыть веб-страницу в Chrome на Mac Сконфигурировать Runner задач больше не присутствует в VSC 1.24.0 - Control-Shift-P не возвращает результатов для этой строки.

VS Code имеет расширение Live Server, которое поддерживает запуск в один клик из строки состояния.

Некоторые из особенностей:

Запуск в один клик из строки состояния
Live Обновить
Поддержка Chrome Debugging Attachment

Это расширение также имеет веб-надстройку для обеспечения автоматической перезагрузки динамических страниц. @ M.Sundstrom Можете ли вы дать мне название / ссылку этого дополнения, пожалуйста? Все еще очень полезно, и особенно полностью свободная конфигурация! Это не рекомендуется для сложных страниц, может быть, хорошо для новых программистов но, кажется, вы не можете предварительно просмотреть несохраненный активный файл, верно? (Запускает его, не просматривает html, но показывает в браузере иерархию папок)

@InvisibleDev - чтобы заставить это работать на Mac, пытающемся использовать это:

Если у вас уже открыт Chrome, он запустит ваш HTML-файл на новой вкладке.

Если вы хотите выполнить перезагрузку в режиме реального времени, вы можете использовать gulp-webserver, который будет следить за изменениями вашего файла и перезагружать страницу, так что вам не нужно нажимать F5 каждый раз на вашей странице:

Вот как это сделать:

Откройте командную строку (cmd) и введите

Установка npm --save-dev gulp-webserver

Введите Ctrl + Shift + P в VS Code и введите Configure Task Runner . Выберите его и нажмите Enter. Он откроет для вас файл tasks.json. Удалить все с конца и ввести только следующий код

tasks.json

В корневой каталог вашего проекта добавьте gulpfile.js и введите следующий код:

gulpfile.js

Теперь в VS Code введите Ctrl + Shift + P и введите «Run Task», когда вы введете его, вы увидите свою задачу «webserver» и нажмите Enter.

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

Вот информация о том, как настроить 'gulp-webserver' для порта экземпляра и какую страницу загрузить, .

Вы также можете запустить свою задачу, просто нажав Ctrl + P и набрав задачу веб-сервера

Я должен был бежать npm install -g gulp , npm install -g gulp-webserver и добавить переменную окружения NODE_PATH , что указывает на мой AppData \ НПМ \ node_modules. Тогда я смог запустить задачу веб-сервера, однако я получаю 404 при запуске браузера. Есть идеи, что мне не хватает? Неважно, просто пришлось изменить «приложение» в вашем примере на «.» (так он служит из текущего каталога). Один комментарий к ответу: если вы хотите запустить html-файл в вашем браузере, который автоматически перезагрузит изменения, ваш gulpfile.js должен выглядеть следующим образом с «.» вместо «приложения». Код = var gulp = require ('gulp'), веб-сервер = require ('gulp-webserver'); gulp.task ('webserver', function () ));>); Я получал «Cannot GET /», потому что я копировал gulpfile.js без настройки строки gulp.src('app') так, чтобы она фактически указывала на мой источник (который был не /app «.»). Работает отлично. Спасибо!

Теперь вы можете установить расширение View In Browser . Я проверял это на окнах с хромом, и это работает.

Версия vscode: 1.10.2

Это не обновляет браузер автоматически, и это не то, что ищет OP

Вот версия 2.0.0 для текущего документа в Chrome с сочетанием клавиш:

Для работы на веб-сервере:

В Linux вы можете использовать xdg-open команду, чтобы открыть файл в браузере по умолчанию:

Спасибо! Я пользователь Linux и чувствовал себя потерянным. Я хотел бы добавить, что нужно нажать, Ctrl + Shift + b чтобы запустить его в браузере. Для меня мнемоника была "b = browser". :-) Это работает, но кажется устаревшим, если у вас есть обновленная версия, спасибо

Откройте Visual Studio Code, затем перейдите к расширениям.

Ищите «открыть в браузере».

3. Установите его.

4.Нажмите правой кнопкой мыши свой HTML-файл, вы найдете опцию «Открыть в браузере».

Я просто повторяю шаги, которые я использовал в msdn блоге. Это может помочь сообществу.

Это поможет вам настроить локальный веб-сервер, известный как lite-server with VS Code , а также поможет разместить ваши статические html файлы localhost и debug ваш Javascript код.

1. Установите Node.js

Если еще не установлен, получите его здесь

Он поставляется с npm (менеджер пакетов для приобретения и управления вашими библиотеками разработки)

2. Создайте новую папку для вашего проекта

Где-нибудь на вашем диске создайте новую папку для вашего веб-приложения.

3. Добавьте файл package.json в папку проекта

Затем скопируйте / вставьте следующий текст:

4. Установите веб-сервер

В окне терминала (командная строка в Windows), открытом в папке вашего проекта, выполните следующую команду:

Это установит lite-сервер (определенный в package.json), статический сервер, который загружает index.html в ваш браузер по умолчанию и автоматически обновляет его при изменении файлов приложения.

5. Запустите локальный веб-сервер!

(Предполагая, что у вас есть файл index.html в папке вашего проекта).

В том же окне терминала (командная строка в Windows) запустите эту команду:

Подождите секунду, и index.html загрузится и отобразится в вашем браузере по умолчанию, обслуживаемом вашим локальным веб-сервером!

lite-сервер следит за вашими файлами и обновляет страницу, как только вы вносите изменения в любые html, js или css файлы.

И если у вас VS Code настроен на автоматическое сохранение (меню Файл / Автосохранение), вы увидите изменения в браузере по мере ввода!

Ноты:

Вот и все. Теперь перед любой сессией кодирования просто наберите npm start и все готово!

Первоначально размещено здесь в msdn блоге. Кредиты переходит к автору: @Laurent Duveau

Если вы только на Mac этот tasks.json файл:

. это все, что вам нужно, чтобы открыть текущий файл в Safari, при условии, что его расширение ".html".

Создайте, tasks.json как описано выше, и вызовите его с помощью ⌘ + shift + b .

Если вы хотите открыть его в Chrome, то:

Это будет делать то, что вы хотите, как при открытии в новой вкладке, если приложение уже открыто.

Решение в один клик - просто установите расширения с открытым браузером из торговой площадки Visual Studio.

Обновленный ответ от 18 апреля 2020 года

Нажмите на этот значок управления слева внизу. Нажмите Расширения или Сокращение Ctrl+Shift+X

Затем поиск по расширению с этим ключевым предложением Открыть в браузере по умолчанию . Вы найдете это расширение. Это лучше для меня.

Теперь щелкните правой кнопкой мыши на html файле, и вы увидите « Открыть в браузере по умолчанию» или «Быстрый переход», Ctrl+1 чтобы увидеть html файл в браузере.

Для Mac - Открывается в Chrome - Проверено на VS Code v 1.9.0

Используйте Command + shift +, p чтобы открыть палитру команд.

Введите Configure Task Runner, при первом запуске VS Code выдаст вам прокручивающееся меню, если оно выберет «Other». Если вы сделали это раньше, VS Code просто отправит вас прямо на tasks.json.

Один раз в файле tasks.json. Удалите отображаемый скрипт и замените его следующим:

Вернитесь к html-файлу и нажмите Command + Shift +, b чтобы просмотреть страницу в Chrome.

Если вы введете > его, он покажет вам команды show и run

Или в вашем случае с HTML, я думаю, F5 после открытия палитры команд следует открыть отладчик.

Открытие файлов в браузере Opera (в Windows 64 бит). Просто добавьте эти строки:

Обратите внимание на формат пути в «команде»: строка. Не используйте формат «C: \ path_to_exe \ runme.exe».

Чтобы запустить эту задачу, откройте HTML-файл, который вы хотите просмотреть, нажмите F1, введите задачу Opera и нажмите Enter

мой скрипт бегуна выглядит так:

и он просто открывает мой проводник, когда я нажимаю ctrl shift b в моем файле index.html

вот как вы можете запустить его в нескольких браузерах для Windows

обратите внимание, что я ничего не набирал в args для edge, потому что Edge - мой браузер по умолчанию, просто дал ему имя файла.

РЕДАКТИРОВАТЬ: также вам не нужно -incognito, ни -private-window . это только я, мне нравится просматривать его в частном окне

Я копировал только tasks часть. "args":["/C"] является то , что делает эту работу. Из любопытства, что это делает?

Нажмите Ctrl + K, а затем M, чтобы открыть «Выбор языка» (или щелкните в правом нижнем углу с надписью HTML перед этим смайликом), введите разметку и нажмите Enter

Теперь нажмите Ctrl + K, а затем V, он откроет ваш HTML в ближайшей вкладке.

Теперь команды emmet не работали в этом режиме в моем html-файле, поэтому я вернулся в исходное состояние (примечание - html tag tellisense работали отлично)

Чтобы перейти в исходное состояние - нажмите Ctrl + K, затем M, выберите автоопределение. Команды emmet начали работать. Если вы довольны средством просмотра только html, вам не нужно возвращаться в исходное состояние.

Вам интересно, почему vscode не имеет опции просмотра html по умолчанию, когда он может отображать html-файл в режиме уценки?

Во всяком случае, это круто. Счастливого vscoding :)

Вот версия 2.0.0 для Mac OSx:

Ctrl + F1 откроет браузер по умолчанию. В качестве альтернативы вы можете нажать Ctrl + Shift + P, чтобы открыть командное окно и выбрать «Просмотр в браузере». HTML-код должен быть сохранен в файле (несохраненный код в редакторе - без расширения, не работает)

Какую версию кода Visual Studio вы используете? Эти команды не работают в моей только что обновленной версии 1.8.1. Ctrl + F1 ничего не делает, и у меня нет опции View in Browser в палитре команд. Может быть, у вас есть что-то помимо установленного по умолчанию или дополнительные задачи в вашем tasks.json?

в любом случае, мое решение ( windows ) построено на вершине @ noontz. его конфигурации, возможно, было достаточно для более старых версий, vscode но не с 1.34 (по крайней мере, я не мог заставить его работать ..).

наши конфиги почти идентичны, за исключением одного свойства - это свойство является group собственностью. Я не уверен, почему, но без этого моя задача даже не появилась бы в палитре команд.

так. работа tasks.json для windows пользователей, работающих vscode 1.34 :

обратите внимание, что problemMatcher свойство не требуется, чтобы это работало, но без него вам навязывают дополнительный ручной шаг. пытался прочитать документы по этому свойству, но я слишком толстый, чтобы понять. надеюсь, кто-нибудь придет и обучит меня, но да, заранее спасибо за это. все, что я знаю, - включить это свойство и ctrl+shift+b открыть текущий html файл в новой chrome вкладке, без проблем.

Visual Studio Code – это один из наиболее популярных редакторов кода, разработанный корпорацией Microsoft. Он распространяется в бесплатном доступе и поддерживается всеми актуальными операционными системами: Windows, Linux и macOS. VS Code представляет собой обычный текстовый редактор с возможностью подключения различных плагинов, что дает возможность работать со всевозможными языками программирования для разработки любого IT-продукта.

Несмотря на столь высокую популярность программы, ее функционал до сих пор остается не таким очевидным, из-за чего многие пользователи предпочитают продукт конкурента, нежели VS Code. Чтобы решить все проблемы, возникающие при работе с Visual Studio Code, рекомендую ознакомиться с подробным гайдом по настройке этого редактора кода. В нем я покажу, что VS Code – это мощный инструмент, которым может пользоваться каждый.

Установка Visual Studio Code

С установкой среды не должно возникнуть никаких проблем, но давайте все же проведем небольшой ликбез. Выполним несколько действий:

Переходим на официальный сайт и загружаем установочный файл.
Следующим шагом запускаем установочник и ставим редактор кода на компьютер. В блоке «Выберите дополнительные задачи» рекомендую отметить два пункта, позволяющие запускать файлы через выпадающее меню – так вы сможете быстро открыть код в VS Code.

На этом установка завершена. Теперь мы можем использовать редактор кода по назначению. Обычно с этим не должно возникнуть никаких проблем, однако на слабых машинах запуск утилиты часто прерывается. Вылечить такой недуг можно с помощью добавления нового значения к пути ярлыка. Для этого откроем его свойства через правый клик мыши и в графе «Объект» пропишем --disable-gpu.

Готово! Теперь программа должна работать на любом компьютере.

Интерфейс Visual Studio Code

При первом запуске перед нами отобразится окно приветствия, через которое можно получить быстрый доступ к ранее запущенным проектам либо создать новые. Весь интерфейс на английском языке (всего в несколько кликов он переводится на русский, но об этом чуть позже). Давайте пока разберемся с интерфейсом: откроем для примера файл с кодом, посмотрим, как его идентифицирует программа без предварительных настроек, и разберем каждый блок утилиты.

Запустить файл с кодом мы можем через правый клик мыши -> Открыть с помощью Code. Файл можно открыть и в программе: для этого в верхнем правом углу выбираем «File» и жмем «Open File…». После этого переходим в нужную директорию и выбираем файл.

В результате перед нами отобразится окно с кодом из файла. Давайте визуально разделим интерфейс на блоки и рассмотрим каждый из них более детально.

Первое, что бросается в глаза, – это блок кода, для которого отведено больше всего места. Название функций и прочее подсвечено разными цветами. Здесь же указан путь до файла, а чуть выше расположены вкладки-файлы, по которым можно перемещаться. С помощью них мы можем добавлять не просто один файл с кодом, а целый проект.

Следующий блок – левая панель управления, включающая в себя 5 основных вкладок: «Проводник», «Поиск», «Система управления версиями», «Запуск кода» и «Расширения». Первая предоставляет пользователю возможность просматривать содержимое проекта и быстро перемещаться внутри него.

Вторая вкладка – поиск. Используется для нахождения слов в документе. Он также может быть запущен с помощью комбинации клавиш «CTRL+SHIFT+F». Алгоритм использования довольно прост – вводим название в поиск и смотрим результат.

Система управления версиями – предназначена для взаимодействия с git.

Запустить и проверить работоспособность кода мы можем в следующей вкладке:

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

Следующий блок – нижний статус-бар. В нем отображается общая информация о состоянии программы. Обратите внимание, что VS Code автоматически определяет язык программирования и информирует нас об этом.

И еще один раздел – правая панель, включающая в себя небольшой дисплей, который отображает код в уменьшенном варианте, а также позволяет удобно скроллить внутри него. Здесь же мы можем разделить окно кода на несколько столбцов, а также закрыть все файлы одним кликом – для этого используются две верхние кнопки.

Как видите, если пройтись по интерфейсу программы, то она уже не кажется такой сложной. Чтобы сделать все еще проще, давайте проведем русификацию всех элементов интерфейса. О том, как это сделать, поговорим далее.

Русификация Visual Studio Code

Чтобы провести русификацию программы, открываем вкладку с расширениями и прописываем запрос vscode-language-pack-ru. В результате будет отображен новый элемент с кнопкой «Install» – кликаем по ней и ожидаем завершения установки.

Перезагружаем программу и смотрим, что язык интерфейса был изменен на русский:

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

Внешний вид

Мы можем полностью изменить цветовую схему утилиты. Чтобы это сделать, воспользуемся комбинацией клавиш «CTRL+SHIFT+P» и введем запрос «theme». В отобразившемся списке выберем «Параметры: Цветовая тема».

В результате отобразится список возможных тем – для примера возьмем солнечную тему.

После применения темы интерфейс примет следующий вид:

Обратите внимание, что это не весь список тем – вы можете установить и другие. Для этого пролистайте в самый низ списка и выберите «Установить дополнительные цветовые темы…». После этого в левой части отобразится дополнительный блок с доступными цветовыми решениями.

Вот так мы можем изменить внешний вид программы. Теперь давайте перейдем к техническим моментам и рассмотрим работу наиболее важных плагинов.

Управление проектами

По умолчанию Visual Studio Code поддерживает работу с несколькими проектами, однако перемещаться между ними не очень удобно. Для удобства обычно используют плагин под названием Project Manager. С его помощью открывается возможность перемещения между рабочими областями всего в один клик. Установка проходит через магазин расширений, о котором мы говорили ранее. После того как менеджер проектов будет установлен, в левой панели управления появится новая вкладка для работы с плагином.

Теперь работа с проектами не должна вызывать никаких трудностей.

Автоформатирование кода

Один из важных этапов программирования – умение приводить все к единому виду с правильными отступами. Для таких задач в VS Code есть специальные плагины, позволяющие форматировать весь текстовый документ. Это такие расширения, как PHP-CS-Fixer для PHP, Prettier для JS/HTML/CSS и другие.

Рассмотрим, как форматируется код, написанный на JavaScript:

Возьмем для примера функцию, отступы в которой выстроены случайным образом.
Устанавливаем плагин Prettier через магазин расширений и открываем документ, который нужно отформатировать. Зажимаем комбинацию клавиш «CTRL+SHIFT+P» и вводим запрос «Format Document».
Смотрим на код и видим, что он преобразился и принял аккуратный вид.

Аналогичным образом мы можем отформатировать код, написанный на других языках программирования. Для этого достаточно установить нужное расширение.

Автодополнение

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

По умолчанию функция автодополнения в Visual Studio Code доступна только для некоторых языков. Для прочих языков программирования существуют дополнительные пакеты с окончанием «intellisense».

Посмотреть, какие пакеты доступны, вы можете в магазине плагинов.

Рекомендую установить PHP Intellisense, CSS Intellisense и Path Intellisense.

Управление Vim

Vim – это свободный текстовый редактор, работающий на основе vi. По умолчанию он установлен на каждой операционной системе семейства Unix. Кроме того, он доступен и в Visual Studio Code. Для работы с ним потребуется установить расширение с аналогичным названием:

Теперь мы можем перемещаться по файлу клавишами h, j, k, l, использовать Esc и сохранять файл командой :w.

Отладка кода

Для того чтобы запустить код в VS Code, нам нужно воспользоваться одним из расширений. Например, для JavaScript подойдет Debugger for Chrome. Узнать, какое расширение необходимо для конкретного языка, можно через «Выполнить» -> «Установить дополнительные отладчики…».

В результате в левой части окна будет отображен список доступных плагинов – найдите в нем подходящий для вас и следуйте инструкции.

После того как нужный плагин будет установлен, можно запускать отладку кода. Для этого достаточно открыть пункт «Выполнить» и нажать на кнопку «Запустить отладку». Также это можно сделать с помощью клавиши «F5».

С помощью плагинов мы можем отладить код, написанный на любом языке программирования.

Заключение

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

Надеюсь, что работа в VS Code больше не будет для вас проблемой, а активные проекты ждет успех. Удачи!

Используйте плагин Markdown Preview Enhanced в Visual Studio Code

Visual Studio Code можно скачать с официального сайта.

После загрузки откройте VS Code.

Прикрепите китайское введение в Markdown Preview Enhanced:
Внедрение Markdown Preview Enhanced в Китае

[Расширения слева (сочетание клавиш Ctrl + Shift + X)] -> [Искать «markdown-preview-extended» в поле поиска] -> [Установить], вы можете установить плагин, как показано на рисунке:

После загрузки плагина перезапустите VS Code.

[Файл] -> [Новый файл], создайте новый файл, нажмите кнопку «Обычный текст» в правом нижнем углу нового файла, найдите разметку в появившемся окне поиска языкового режима и установите для формата файла нового файла значение «Markdown», как показано на рисунке:

Введите текстовое содержимое во вновь созданный текст уценки, а затем щелкните правой кнопкой мыши, чтобы вызвать панель функций (оконная система), нажмите [Улучшенный предварительный просмотр уценки: открыть предварительный просмотр сбоку], предварительный просмотр интерфейса предварительного просмотра MPE будет отображаться справа, на этот раз слева Введите содержимое, и в поле предварительного просмотра справа автоматически отобразится преобразованный текст, как показано на рисунке:

Используемый код выглядит следующим образом:

В интерфейсе предварительного просмотра MPE щелкните правой кнопкой мыши, чтобы вызвать панель функций (система Windows). Открыть в браузере можно открыть файл в браузере, и вы также можете выбрать создание HTML или PDF.

При выборе создания PDF-файла я обнаружил подсказку: «princexml» необходимо установить, как показано на рисунке:

Решение: скачать Prince и настроить

Прикрепите адрес загрузки официального сайта Prince:
Адрес загрузки официального сайта Prince

После завершения загрузки щелкните [Компьютер (щелкните правой кнопкой мыши)] -> [Свойства] -> [Дополнительные параметры системы (выберите на домашней странице панели управления)] -> [Дополнительно] -> [Переменные среды], установите путь установки Prince на "E: \ Download \ Prince \ engine \ bin "(эта машина) добавляется к системным переменным, как показано на рисунке:

Перезапустите VS Code, вы увидите, что файл PDF можно сгенерировать, как показано на рисунке:

Но оказалось, что PDF не может создать блок-схему, как показано на рисунке:

Место, где создается файл, находится в расположении файла программы, как показано на рисунке:

Как я могу просмотреть свой HTML-код в браузере с новым кодом Microsoft Visual Studio?

С Notepad ++ у вас есть возможность запускать в браузере. Как я могу сделать то же самое с Visual Studio Code?

23 ответа

Для Windows - откройте браузер по умолчанию - протестировано на VS Code v 1.1.0

Ответьте как на открытие конкретного файла (имя жестко запрограммировано), так и на открытие ЛЮБОГО другого файла.

Шаги:

Используйте ctrl + shift + p (или F1 ), чтобы открыть палитру команд.

Введите Tasks: Configure Task или в более старых версиях Configure Task Runner . При его выборе откроется файл tasks.json . Удалите отображаемый сценарий и замените его следующим:

Не забудьте изменить раздел «args» файла tasks.json на имя вашего файла. Это всегда будет открывать этот конкретный файл, когда вы нажимаете F5.

Вы также можете настроить это так, чтобы открывать любой файл, который вы открывали в то время, используя ["$"] в качестве значения для "args". Обратите внимание, что $ выходит за пределы <. >, поэтому [""] неверно.

Вернитесь к своему html-файлу (в данном примере это «text.html») и нажмите ctrl + shift + b , чтобы просмотреть свою страницу. в вашем веб-браузере.

Задача VSCode - открытие по идентификатору пакета приложений (только для macOS).

Откройте пользовательский Chrome с URL-адресом из приглашения

Откройте пользовательский Chrome с активным файлом

Примечания

при необходимости замените свойство windows на другую ОС
замените $ на свое собственное расположение Chrome, например "C:/Program Files (x86)/Google/Chrome/Application/chrome.exe"
замените $ на свой собственный каталог профиля Chrome, например "C:/My/Data/chrome/profile" или оставьте это
Вы можете сохранить переменные, как указано выше, если хотите. Для этого добавьте следующие записи в settings.json - пользователя или рабочую область -, настройте пути в соответствии с вашими потребностями:

Вы можете повторно использовать эти переменные, например. в launch.json для целей отладки: "runtimeExecutable": "$"

В любом случае, мое решение ( windows ) построено на основе @ noontz. его конфигурации могло хватить для более старых версий vscode , но не для 1.34 (по крайней мере, я не смог заставить его работать ..).

Наши конфигурации почти идентичны, за исключением одного свойства - этим свойством является свойство group . Я не уверен, почему, но без этого моя задача даже не отображалась бы в палитре команд.

Так. рабочий tasks.json для windows пользователей, использующих vscode 1.34 :

Обратите внимание, что свойство problemMatcher не требуется для того, чтобы это работало, но без него вам потребуется дополнительный ручной шаг. пытался прочитать документацию по этому объекту, но я слишком толст, чтобы понять. надеюсь, кто-нибудь придет и научит меня, но да, заранее спасибо за это. все, что я знаю, - включите это свойство, и ctrl+shift+b откроет текущий файл html на новой вкладке chrome , без проблем.

Ctrl + F1 откроет браузер по умолчанию. в качестве альтернативы вы можете нажать Ctrl + Shift + P, чтобы открыть окно команд, и выбрать «Просмотр в браузере». HTML-код необходимо сохранить в файл (несохраненный код в редакторе - без расширения не работает)

Для Mac установите содержимое файла tasks.json (в папке .vscode) следующим образом и используйте SHFT + COMMAND + B для открытия.

Вот версия 2.0.0 для Mac OSx:

Нажмите Ctrl + K, а затем M, откроется «Выбор языкового режима» (или щелкните в правом нижнем углу, где перед этим смайликом написано HTML), введите уценку и нажмите Enter.

Теперь нажмите Ctrl + K, а затем V, он откроет ваш html на ближайшей вкладке.

Теперь команды emmet не работали в этом режиме в моем html файле, поэтому я вернулся в исходное состояние (примечание - html tag tellisense работал отлично)

Чтобы вернуться в исходное состояние - нажмите Ctrl + K, затем M, выберите автоопределение. Команды emmet начали работать. Если вас устраивает просмотрщик только html, то вам не нужно возвращаться в исходное состояние.

Интересно, почему vscode не имеет опции просмотра HTML по умолчанию, когда он может отображать HTML-файл в режиме уценки.

В любом случае это круто. Удачного vscoding :)

Вот как вы можете запустить его в нескольких браузерах для Windows

Обратите внимание, что я ничего не вводил в аргументы для edge, потому что Edge - мой браузер по умолчанию, просто дал ему имя файла.

РЕДАКТИРОВАТЬ: также вам не нужно -incognito или -private-window . это только я, мне нравится просматривать его в частном окне

Мой скрипт бегуна выглядит так:

И он просто открывает мой проводник, когда я нажимаю ctrl shift b в моем файле index.html

Открытие файлов в браузере Opera (в Windows 64 бит). Просто добавьте эти строки:

Обратите внимание на формат пути в строке "command": . Не используйте формат «C: \ path_to_exe \ runme.exe».

Чтобы запустить эту задачу, откройте HTML-файл, который вы хотите просмотреть, нажмите F1, введите task opera и нажмите Enter.

Если вы введете > , он покажет вам показать и запустить команды

Или в вашем случае с HTML, я думаю, что F5 после открытия палитры команд должен открыть отладчик.

Решение одним щелчком мыши просто установите open-in-browser Extensions из Торговая площадка Visual Studio.

Для Mac - открывается в Chrome - проверено на VS Code v 1.9.0

Используйте Command + shift + p , чтобы открыть палитру команд.

Введите «Настроить средство запуска задач», при первом использовании VS Code выдаст вам прокручиваемое меню, если оно выбрано «Другое». Если вы это делали раньше, VS Code просто отправит вас прямо в tasks.json.

Однажды в файле tasks.json. Удалите отображаемый сценарий и замените его следующим:

Вернитесь к своему html-файлу и нажмите Command + Shift + b , чтобы просмотреть свою страницу в Chrome.

Если вы просто используете Mac, этот файл tasks.json :

. это все, что вам нужно, чтобы открыть текущий файл в Safari, если его расширение - «.html».

Создайте tasks.json , как описано выше, и вызовите его с помощью ⌘ + shift + b .

Если вы хотите, чтобы он открывался в Chrome, то:

Это будет делать то, что вы хотите, например, при открытии в новой вкладке, если приложение уже открыто.

Я просто повторно публикую шаги, которые использовал в блоге msdn . Это может помочь сообществу.

Это поможет вам настроить локальный веб-сервер, известный как lite-server с VS Code , а также руководства размещать статические файлы html в localhost и debug коде Javascript .

1. Установите Node.js

Если он еще не установлен, загрузите его здесь

Он поставляется с npm (менеджер пакетов для получения и управления вашими библиотеками разработки)

2. Создайте новую папку для своего проекта

Где-нибудь на вашем диске создайте новую папку для вашего веб-приложения.

3. Добавьте файл package.json в папку проекта

Затем скопируйте / вставьте следующий текст:

4. Установите веб-сервер

В окне терминала (командная строка в Windows), открытом в папке вашего проекта, выполните эту команду:

Это установит lite-server (определенный в package.json), статический сервер, который загружает index.html в ваш браузер по умолчанию и автоматически обновляет его при изменении файлов приложения.

5. Запустите локальный веб-сервер!

(Предполагая, что у вас есть файл index.html в папке вашего проекта).

В том же окне терминала (в командной строке Windows) запустите эту команду:

Lite-server наблюдает за вашими файлами и обновляет страницу, как только вы вносите изменения в любые файлы html, js или css.

И если у вас есть VS Code, настроенный на автоматическое сохранение (меню File / Auto Save), вы увидите изменения в браузере по мере ввода!

Примечания:

Это оно. Теперь перед любым сеансом кодирования просто введите npm start, и все готово!

Первоначально опубликовано здесь в блоге msdn . Кредит предоставляется автору: @Laurent Duveau

Обновленный ответ от 18 апреля 2020 г.

Нажмите на этот левый нижний значок управления. Нажмите Расширения или Сокращение Ctrl+Shift+X .

Затем выполните поиск в расширении с этим ключевым предложением Открыть в браузере по умолчанию . Вы найдете это расширение. Мне так лучше.

Теперь щелкните правой кнопкой мыши файл html , и вы увидите Открыть в браузере по умолчанию или Short Cut Ctrl+1 , чтобы просмотреть файл html в браузере.

В Linux вы можете использовать >, чтобы открыть файл в браузере по умолчанию:

Вот версия 2.0.0 для текущего документа в Chrome с сочетанием клавиш /:

Для работы на веб-сервере:

Откройте код Visual Studio, затем перейдите к расширениям.

Найдите «открыть в браузере».

3. Установите его.

4. Щелкните правой кнопкой мыши свой html файл, вы найдете опцию «Открыть в браузере».

Теперь вы можете установить расширение Просмотр в браузере. Я тестировал его на окнах с хромом, и он работает.

Версия vscode: 1.10.2

@InvisibleDev - чтобы это работало на Mac, попробуйте использовать это:

Если у вас уже открыт Chrome, он запустит ваш html-файл в новой вкладке.

VS Code имеет Live Server Extension, который поддерживает запуск одним щелчком мыши из строки состояния.

Читайте также: