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

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

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

    19 Solutions collect form web for “Как просмотреть мой код HTML в браузере с помощью кода Visual Studio?”

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

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

    шаги:

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

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

      { "version": "0.1.0", "command": "explorer", "windows": { "command": "explorer.exe" }, "args": ["test.html"] } 

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

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

    3. Сохраните файл.

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

    введите описание изображения здесь

    @InvisibleDev – чтобы это работало на mac, пытаясь использовать это:

     { "version": "0.1.0", "command": "Chrome", "osx": { "command": "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" }, "args": [ "${file}" ] } 

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

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

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

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

      npm install –save-dev gulp-webserver

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

    tasks.json

     { "version": "0.1.0", "command": "gulp", "isShellCommand": true, "args": [ "--no-color" ], "tasks": [ { "taskName": "webserver", "isBuildCommand": true, "showOutput": "always" } ] } 
    • В корневой каталог вашего проекта добавьте gulpfile.js и введите следующий код:

    gulpfile.js

     var gulp = require('gulp'), webserver = require('gulp-webserver'); gulp.task('webserver', function () { gulp.src('app') .pipe(webserver({ livereload: true, open: true })); }); - var gulp = require('gulp'), webserver = require('gulp-webserver'); gulp.task('webserver', function () { gulp.src('app') .pipe(webserver({ livereload: true, open: true })); }); 
    • Теперь в VS Code введите Ctrl + Shift + P и введите «Запустить задачу», когда вы входите в нее, вы увидите выбранную вами задачу «веб-сервер» и нажмите клавишу ввода.

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

    Ниже приведена информация о том, как настроить «gulp-webserver» на порт, и какую страницу загрузить, …

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

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

    Некоторые из функций:

    • Один клик Запуск из строки состояния
    • Live Reload
    • Поддержка приложения для отладки Chrome

    введите описание изображения здесь

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

    Версия vscode: 1.10.2

    введите описание изображения здесь

    В 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": [ { "taskName": "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" } 

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

     { "version": "0.1.0", "command": "open", "args": ["${file}"], } 

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

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

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

     { "version": "0.1.0", "command": "open", "args": ["-a", "Chrome.app", "${file}"], } 

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

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

    Это поможет вам настроить локальный веб-сервер, известный как Lite-сервер с 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-сервер (определенный в package.json), статический сервер, который загружает index.html в ваш браузер по умолчанию и автоматически обновляет его, когда файлы приложений меняются.

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

    (Предположим, у вас есть файл index.html в папке проекта).

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

     npm start 

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

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

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

    Заметки:

    • Не закрывайте подсказку командной строки, пока вы не закончите кодирование в своем приложении за день
    • Он открывается на http: // localhost: 10001, но вы можете изменить порт, отредактировав файл package.json.

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

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

    CTRL+SHIFT+P отобразит командную палитру.
    В зависимости от того, что вы используете, конечно. Пример в приложении ASP.net вы можете ввести:
    >kestrel а затем откройте свой веб-браузер и введите localhost:(your port here) .

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

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

    Источник: ссылка

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

     { "version": "0.1.0", "command": "opera", "windows": { "command": "///Program Files (x86)/Opera/launcher.exe" }, "args": ["${file}"] } 

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

    Чтобы запустить эту задачу, откройте html-файл, который хотите просмотреть, нажмите F1, введите команду « Опера» и нажмите «Ввод»

    мой сценарий runner выглядит так:

     { "version": "0.1.0", "command": "explorer", "windows": { "command": "explorer.exe" }, "args": ["{$file}"] } 

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

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

     { "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 – это мой браузер по умолчанию, просто дал ему имя файла.

    EDIT: также вам не нужно -incognito или -private-window … это просто мне нравится просматривать его в частном окне

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

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

    введите описание изображения здесь

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

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

     { "version": "0.1.0", "command": "Chrome", "osx": { "command": "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" }, "args": ["${file}"] } 
    1. Вернитесь в свой html-файл и нажмите Command + Shift + b, чтобы просмотреть свою страницу в Chrome.

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

    Вот версия 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 должен быть сохранен в файле (несохраненный код в редакторе – без расширения, не работает)

    Недавно натолкнулся на эту функцию в одном из обучающих программ на Visual Studio http://www.lynda.com

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

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

    Тадааа !!!

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

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

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

    Во всяком случае, это круто. Счастливый vscoding 🙂

    Вы не можете. Visual Studio не предназначалась для веб-дизайна или разработки. Вы должны закодировать некоторые строки, чтобы заставить его работать.

    Interesting Posts

    Панель автоматического закрытия Google Chrome

    Использование связанных данных, хранящихся в двумерном массиве

    Как заставить Firefox 47 загружать все мои вкладки при запуске

    Как преобразовать stream Java 8 в массив?

    Как раздел может быть заполнен, если du ​​не показывает его?

    Сортировка списка пользовательских classов

    Как смоделировать медленную машину в VM?

    Миграция профиля Google Chrome из Windows 7 в Windows 8 привела к «поврежденному» профилю

    Обработка экрана без потери данных – Android

    Получение IP-адреса клиента в WCF 3.0

    Настройте локальную сеть для поддержки полосы пропускания на один компьютер

    Outlook 2013 сбрасывает напоминание о встрече до 0 минут после принятия приглашения

    Как создать ячейку для отражения последнего введенного значения в столбце?

    Удалился бы NAT, преобразованный в ipv6?

    Что такое аргумент BOOL * stop для enumerateObjectsUsingBlock: используется для?

    Давайте будем гением компьютера.