Как я могу просмотреть свой HTML-код в браузере с помощью нового кода Microsoft Visual Studio?
С Notepad ++ у вас есть возможность запустить в браузере. Как я могу сделать то же самое с кодом Visual Studio?
html
visual-studio-code
preview
Ninjakannon
источник
источник
Ответы:
Для Windows - Откройте браузер по умолчанию - Протестировано на VS Code v 1.1.0
Ответьте на оба вопроса, чтобы открыть определенный файл (имя жестко запрограммировано) ИЛИ открыть ЛЮБОЙ другой файл.
шаги:
Используйте ctrl+ shift+ p(или F1), чтобы открыть палитру команд.
Введите
Tasks: Configure Task
или на старых версияхConfigure Task Runner
. Выбор этого файла откроет файл tasks.json . Удалите отображаемый скрипт и замените его следующим:Не забудьте изменить раздел «args» файла tasks.json на имя вашего файла. Это всегда откроет этот конкретный файл, когда вы нажмете F5.
Вы также можете установить this для открытия любого файла, который вы открыли в данный момент, используя
["${file}"]
в качестве значения «args». Обратите внимание, что$
выходит за пределы{...}
, так что["{$file}"]
это неправильно.Сохраните файл.
Вернитесь к html-файлу (в данном примере это «text.html») и нажмите ctrl+ shift+, bчтобы просмотреть свою страницу в веб-браузере.
источник
VS Code имеет расширение Live Server, которое поддерживает запуск в один клик из строки состояния.
Некоторые из особенностей:
источник
@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
Теперь ваш веб-сервер откроет вашу страницу в браузере по умолчанию. Теперь любые изменения, которые вы внесете в свои страницы HTML или CSS, будут автоматически перезагружены.
Вот информация о том, как настроить 'gulp-webserver' для порта экземпляра и какую страницу загрузить, ...
Вы также можете запустить свою задачу, просто нажав Ctrl + P и набрав задачу веб-сервера
источник
npm install -g gulp
,npm install -g gulp-webserver
и добавить переменную окружения NODE_PATH , что указывает на мой AppData \ НПМ \ node_modules. Тогда я смог запустить задачу веб-сервера, однако я получаю 404 при запуске браузера. Есть идеи, что мне не хватает?gulp.src('app')
так, чтобы она фактически указывала на мой источник (который был не/app
«.»). Работает отлично. Спасибо!Теперь вы можете установить расширение View In Browser . Я проверял это на окнах с хромом, и это работает.
Версия vscode: 1.10.2
источник
Вот версия 2.0.0 для текущего документа в Chrome с сочетанием клавиш:
tasks.json
keybindings.json
:Для работы на веб-сервере:
https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
источник
В Linux вы можете использовать
xdg-open
команду, чтобы открыть файл в браузере по умолчанию:источник
Ctrl + Shift + b
чтобы запустить его в браузере. Для меня мнемоника была "b = browser". :-)Шаг 1:
Ищите «открыть в браузере».
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
Введите Configure Task Runner, при первом запуске VS Code выдаст вам прокручивающееся меню, если оно выберет «Other». Если вы сделали это раньше, VS Code просто отправит вас прямо на tasks.json.
Один раз в файле tasks.json. Удалите отображаемый скрипт и замените его следующим:
источник
CTRL+SHIFT+P
вызовет командную палитру.В зависимости от того, что вы работаете, конечно. Например, в приложении ASP.net вы можете ввести:,
>kestrel
а затем открыть веб-браузер и ввестиlocalhost:(your port here)
.Если вы введете
>
его, он покажет вам команды 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"]
является то , что делает эту работу. Из любопытства, что это делает?Недавно наткнулся на эту функцию в одном из учебных пособий по Visual Studio на сайте www.lynda.com.
Нажмите 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-код должен быть сохранен в файле (несохраненный код в редакторе - без расширения, не работает)
источник
вероятно, большинство из них сможет найти решение из приведенных выше ответов, но, видя, что ни один из них не работает для меня (
vscode v1.34
), я подумал, что поделюсь своим опытом. если хотя бы один человек посчитает это полезным, круто не напрасно, amiirte ?в любом случае, мое решение (
windows
) построено на вершине @ noontz. его конфигурации, возможно, было достаточно для более старых версий,vscode
но не с1.34
(по крайней мере, я не мог заставить его работать ..).наши конфиги почти идентичны, за исключением одного свойства - это свойство является
group
собственностью. Я не уверен, почему, но без этого моя задача даже не появилась бы в палитре команд.так. работа
tasks.json
дляwindows
пользователей, работающихvscode 1.34
:обратите внимание, что
problemMatcher
свойство не требуется, чтобы это работало, но без него вам навязывают дополнительный ручной шаг. пытался прочитать документы по этому свойству, но я слишком толстый, чтобы понять. надеюсь, кто-нибудь придет и обучит меня, но да, заранее спасибо за это. все, что я знаю, - включить это свойство иctrl+shift+b
открыть текущийhtml
файл в новойchrome
вкладке, без проблем.легко.
источник
Откройте пользовательский Chrome с URL из приглашения
Открыть пользовательский Chrome с активным файлом
Ноты
windows
свойство другой ОС${config:chrome.executable}
на свое местоположение в Chrome, например"C:/Program Files (x86)/Google/Chrome/Application/chrome.exe"
${config:chrome.profileDir}
своим обычным каталогом Chrome, например,"C:/My/Data/chrome/profile"
или оставьте его внеsettings.json
пользовательском или рабочем пространстве и настройте пути в соответствии с вашими потребностями:launch.json
целях отладки:"runtimeExecutable": "${config:chrome.executable}"
источник