Как просмотреть мой HTML-код в браузере с новым Microsoft Visual Studio Code?
С Notepad ++ у вас есть возможность запускаться в браузере. Как я могу сделать то же самое с Visual Studio Code?
Для Windows - откройте браузер по умолчанию - протестировано на коде VS v 1.1.0
Ответьте на открытие определенного файла (имя жестко закодировано) ИЛИ открытие ЛЮБОГО другого файла.
Шаги:
Используйте ctrl < / kbd > + / kbd > + p < / kbd > (или / kbd >), чтобы открыть командную палитру.
Введите Задачи: Настроить задачу
или в более старых версиях Настроить бегуна задачи
. При выборе он откроет файл tasks.json . Удалите отображаемый скрипт и замените его следующим:
{
«версия»: «0.1.0»,
«команда»: «Исследователь»
"окна": {
«команда»: «explorer.exe»
},
"args": ["test.html"]
}
Не забудьте изменить раздел «args» файла attachments.json на имя вашего файла. Это всегда откроет этот конкретный файл при нажатии на F5.
Вы также можете установить это, чтобы открыть любой файл, который вы открыли в то время, используя [" $ {file}"]
в качестве значения для "args". Обратите внимание, что $
выходит за пределы {...}
, поэтому [" {$ file}"]
неверно.
Сохранить файл.
Вернитесь в свой HTML-файл (в этом примере это «text.html») и нажмите ctrl < / kbd > + / kbd > + b < / kbd > просмотреть вашу страницу в вашем Интернете.
Код VS имеет [Расширение Live Server][1], которое поддерживает запуск одним щелчком мыши из строки состояния.
Некоторые из функций:
[1]: https://marketplace.visualstudio.com/items?itemName = ritwickdey.LiveServer
@InvisibleDev - чтобы заставить это работать на Mac, пытающемся использовать это:
{
"version": "0.1.0",
"command": "Chrome",
"osx": {
"command": "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"
},
"args": [
"${file}"
]
}
Если у вас уже открыт хром, он запустит ваш html-файл на новой вкладке.
Если вы хотите перезагрузить в реальном времени, вы можете использовать gulp-webserver, который будет отслеживать изменения и перезагрузку вашего файла, таким образом, вам не нужно каждый раз нажимать F5 на своей странице:
Вот как это сделать
Откройте командную строку (cmd) и введите
npm install --save-dev gulp-webserver
Введите Ctrl + Shift + P в коде VS и введите Настроить Runner Task . Выберите его и нажмите Enter. Он откроет файл askessions.json для вас. Удалить все с его конца, ввести просто следующий код
tasks.json
{
"version": "0.1.0",
"command": "gulp",
"isShellCommand": true,
"args": [
"--no-color"
],
"tasks": [
{
"taskName": "webserver",
"isBuildCommand": true,
"showOutput": "always"
}
]
}
gulpfile.js
var gulp = require('gulp'),
webserver = require('gulp-webserver');
gulp.task('webserver', function () {
gulp.src('app')
.pipe(webserver({
livereload: true,
open: true
}));
});
Ваш веб-сервер теперь откроет вашу страницу в браузере по умолчанию. Теперь любые изменения, которые вы внесете в свои HTML или CSS-страницы, будут автоматически перезагружены.
Вот информация о том, как настроить 'gulp-webserver', например, порт, и какую страницу загрузить ...
Вы также можете запустить свою задачу, просто введя Ctrl + P и введите веб-сервер задач
Теперь вы можете установить расширение [View In Browser][1]. Я проверил это на окнах с хромом, и это работает.
версия vscode: 1.10.2
[1]: https://marketplace.visualstudio.com/items?itemName = qinjia.view-in-browser
В linux вы можете использовать команду xdg-open
, чтобы открыть файл с браузером по умолчанию:
{
"version": "0.1.0",
"linux": {
"command": "xdg-open"
},
"isShellCommand": true,
"showOutput": "never",
"args": ["${file}"]
}
Вот версия 2.0.0 для текущего документа в Chrome с сочетанием клавиш:
tasks.json
{
"version": "2.0.0",
"tasks": [
{
"label": "Chrome",
"type": "process",
"command": "chrome.exe",
"windows": {
"command": "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe"
},
"args": [
"${file}"
],
"problemMatcher": []
}
]
}
keybindings.json
:
{
"key": "ctrl+g",
"command": "workbench.action.tasks.runTask",
"args": "Chrome"
}
Для работы на веб-сервере:
[https://marketplace.visualstudio.com/items?itemName = ritwickdey.LiveServer][1]
[1]: https://marketplace.visualstudio.com/items?itemName = ritwickdey.LiveServer
Я просто перекладываю шаги, которые я использовал из блога msdn. Это может помочь сообществу.
Это поможет вам
настройте локальный веб-сервер, известный как lite-server, с помощью VS Code
, а также поможет вам разместить статические файлы html
в localhost
иdebug
ваш код Javascript
.
1. Установите Node.js
Если он еще не установлен, получите его здесь
Он поставляется с npm (менеджером пакетов для приобретения и управления вашими библиотеками разработки)
2. Создайте новую папку для вашего проекта
Где-то на вашем диске создайте новую папку для вашего веб-приложения.
3. Добавьте файл package.json в папку проекта
Затем скопируйте / вставьте следующий текст:
{
"name": "Demo",
"version": "1.0.0",
"description": "demo project.",
"scripts": {
"lite": "lite-server --port 10001",
"start": "npm run lite"
},
"author": "",
"license": "ISC",
"devDependencies": {
"lite-server": "^1.3.1"
}
}
4. Установите веб-сервер
В окне терминала (командная строка в Windows), открытом в папке проекта, выполните эту команду:
npm install
Это установит lite-server (определенный в package.json), статический сервер, который загружает index.html в браузере по умолчанию и автоматически обновляет его при изменении файлов приложения.
5. Запустите локальный веб-сервер!
(При условии, что в папке проекта есть файл index.html).
В том же окне терминала (командная строка в Windows) запустите эту команду:
npm start
Подождите секунду, и index.html загружается и отображается в вашем браузере по умолчанию, обслуживаемом вашим локальным веб-сервером!
lite-server просматривает ваши файлы и обновляет страницу, как только вы вносите изменения в любые файлы html, js или css.
И если у вас есть код VS, настроенный для автоматического сохранения (меню Файл / Автоматическое сохранение), вы видите изменения в браузере при вводе!
Примечания:
Вот и все. Теперь перед любым сеансом кодирования просто введите npm start, и вы готовы идти!
. Кредиты достаются автору:
@ Laurent Duveau` *Если вы только на Mac, это файл tasks.json
:
{
"version": "0.1.0",
"command": "open",
"args": ["${file}"],
}
. это все, что вам нужно, чтобы открыть текущий файл в Safari, предполагая, что его расширение ".html"..
Создайте tasks.json
, как описано выше, и вызовите его с помощью ⌘ < / kbd > + / kbd > + b < / kbd >.
Если вы хотите, чтобы он открылся в Chrome, тогда:
{
"version": "0.1.0",
"command": "open",
"args": ["-a", "Chrome.app", "${file}"],
}
Это будет делать то, что вы хотите, как при открытии в новой вкладке, если приложение уже открыто.
Решение одним щелчком мыши просто устанавливает [открытый в браузере][1] Расширения с рынка Visual Studio.
[1]: https://marketplace.visualstudio.com/items?itemName = techer.open-in-browser
CTRL + SHIFT + P
вызовет палитру команд.& Лт; br >
В зависимости от того, что вы используете, конечно. Пример в приложении ASP.net вы можете ввести:
> kestrel
, а затем откройте веб-браузер и введите localhost: (ваш порт здесь)
. & Лт; br >
Если вы введете >
, он покажет вам show и run команды
Или в вашем случае с HTML, я думаю, что F5
после открытия палитры команд должен открыть отладчик.
Источник: [ссылка][1]
Открытие файлов в браузере Opera (на Windows 64 бит). Просто добавьте эти строки:
{
"version": "0.1.0",
"command": "opera",
"windows": {
"command": "///Program Files (x86)/Opera/launcher.exe"
},
"args": ["${file}"] }
Обратите внимание на формат пути в строке «команда»: . Не используйте формат «C: \ path_to_exe \ runme.exe».
Чтобы запустить эту задачу, откройте файл html, который вы хотите просмотреть, нажмите F1, введите task opera и нажмите Enter
мой сценарий бегуна выглядит как:
{
"version": "0.1.0",
"command": "explorer",
"windows": {
"command": "explorer.exe"
},
"args": ["{$file}"]
}
и он просто открывает мой проводник, когда я нажимаю ctrl shift b в моем файле index.html
вот как вы можете запустить его в нескольких браузерах для Windows
{
"version": "0.1.0",
"command": "cmd",
"args": ["/C"],
"isShellCommand": true,
"showOutput": "always",
"suppressTaskName": true,
"tasks": [
{
"taskName": "Chrome",
"args": ["start chrome -incognito \"${file}\""]
},
{
"taskName": "Firefox",
"args": ["start firefox -private-window \"${file}\""]
},
{
"taskName": "Edge",
"args": ["${file}"]
}
]
}
обратите внимание, что я ничего не вводил в args для edge, потому что Edge - мой браузер по умолчанию, просто дал ему имя файла.
РЕДАКТИРОВАТЬ: также вам не нужно ни -incognito, ни -private-window...это только я, я люблю смотреть это в частном окне
Для Mac - открывается в Chrome - протестировано на VS Code v 1.9.0
Введите Configure Task Runner, при первом выполнении этого код VS даст вам меню прокрутки вниз, если он выберет «Другое».«Если вы сделали это раньше, VS Code просто отправит вас прямо на attachions.json.
Однажды в файле askets.json. Удалите отображаемый скрипт и замените его следующим:
{ «версия»: «0.1.0», «команда»: «Хром» "osx": { «команда»: «/ Applications/Google Chrome.app/Contents/MacOS/Google Chrome» }, "args": ["$ {file}"] }
Недавно эта функция появилась в одном из руководств по визуальному студийному коду на www.lynda.com
Нажмите Ctrl + K, затем M, он откроет «Режим выбора языка» (или щелкните в правом нижнем углу с надписью HTML перед этим смайликом), введите markdown и нажмите Enter
Теперь нажмите Ctrl + K, а затем V, он откроет ваш html в следующей вкладке.
Tadaaa !!!
Теперь команды emmet не работали в этом режиме в моем html-файле, поэтому я вернулся к исходному состоянию (примечание - html-тег tellisense работал отлично)
Чтобы перейти в исходное состояние - нажмите Ctrl + K, затем M, выберите автоопределение. команды emmet начали работать. Если вы довольны только html-зрителем, вам не нужно возвращаться в исходное состояние.
Интересно, почему vscode по умолчанию не имеет опции просмотра html, когда он может отправить html-файл в режим разметки.
Во всяком случае, это круто. Счастливое вскодирование :)
Вот версия 2.0.0 для Mac OSx:
{
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
"version": "2.0.0",
"tasks": [
{
"label": "echo",
"type": "shell",
"command": "echo Hello"
},
{
"label":"chrome",
"type":"process",
"command":"/Applications/Google Chrome.app/Contents/MacOS/Google Chrome",
"args": [
"${file}"
]
}
]
}
Ctrl + F1 откроет браузер по умолчанию. альтернативно вы можете нажать Ctrl + shift + P, чтобы открыть командное окно и выбрать «Просмотр в браузере». HTML-код должен быть сохранен в файле (несохраненный код в редакторе - без расширения не работает)
вероятно, большинство из них смогут найти решение из приведенных выше ответов, но, видя, как ни один из них не работает для меня (vscode v1.34
), я подумал, что поделюсь своим опытом. если хотя бы один человек считает это полезным, тогда круто, а не впустую пост, amiirte ?
в любом случае, мое решение («окна») построено поверх @noontz. его конфигурации могло быть достаточно для более старых версий vscode
, но не с 1.34
(по крайней мере, я не мог заставить его работать ..).
наши конфигурации почти идентичны, за исключением одного свойства - это свойство, свойство group
. я не уверен почему, но без этого моя задача даже не появилась бы в палитре команд.
так. работающий tasks.json
для пользователей windows
, работающих под управлением vscode 1.34
:
{
«версия»: «2.0.0»,
"задачи": [
{
"label": "Chrome",
«тип»: «процесс»
«команда»: «chrome.exe»,
"окна": {
«команда»: «C: \\ Program Files (x86) \\ Google \\ Chrome \\ Application \\ chrome.exe»
},
"args": [
"$ {файл}"
],
«группа»: «строи»,
"problemMatcher": []
}
]
}
обратите внимание, что свойство problemMatcher
не требуется для работы, но без него вам будет применен дополнительный ручной шаг. пытался прочитать документы на этом объекте, но я слишком толстый, чтобы понять. надеюсь, кто-нибудь придет и научит меня, но да, заранее спасибо за это. все, что я знаю, это - включить это свойство, и ctrl + shift + b
открывает текущий файл html
на новой вкладке chrome
, без проблем.
легко.