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

266

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

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

Ninjakannon
источник
7
VS Code теперь имеет расширение Live Server. Пожалуйста, смотрите мой ответ: stackoverflow.com/a/48721885/466066
Хосе Шериан
3
У меня работало расширение живого сервера. Я не хочу настраивать какие-либо файлы для этого.
AGDM
также связаны: stackoverflow.com/questions/47519768/…
ford04

Ответы:

209

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

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

шаги:

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

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

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

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

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

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

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

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

yushulx
источник
16
Вы даже можете использовать переменные, если у вас более одного HTML-файла. Вы можете сделать: "args": ["{$ file}"], чтобы передать текущий открытый файл. См. Также code.visualstudio.com/Docs/tasks#_variables-in-tasksjson
Дирк Баумер
7
Как мне это сделать в Mac? Там нет exe-файлов. Я хотел бы открыть веб-страницу в Chrome на Mac
InvisibleDev
3
просто получаю сообщение «Не удалось запустить внешнюю программу chrome {$ file}. spawn chrome ENOENT»
Джонни, почему
7
Чтобы настроить задачу в новой папке: Выберите команду «Задачи: настроить задачу», и вы увидите список шаблонов задачи. Выберите Другие, чтобы создать задачу, которая запускает внешнюю команду. , , , Теперь вы должны увидеть файл tasks.json в папке .vscode рабочей области со следующим содержимым:. , , by code.visualstudio.com/Docs/editor/tasks
Ян Цзянь
5
Сконфигурировать Runner задач больше не присутствует в VSC 1.24.0 - Control-Shift-P не возвращает результатов для этой строки.
Lonstar
110

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

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

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

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

Хосе Шериан
источник
8
Это расширение также имеет веб-надстройку для обеспечения автоматической перезагрузки динамических страниц.
М. Сундстрем
@ M.Sundstrom Можете ли вы дать мне название / ссылку этого дополнения, пожалуйста?
Адиль Саджу
2
Все еще очень полезно, и особенно полностью свободная конфигурация!
Джонас
2
Это не рекомендуется для сложных страниц, может быть, хорошо для новых программистов
Ясир Жаруф
1
но, кажется, вы не можете предварительно просмотреть несохраненный активный файл, верно? (Запускает его, не просматривает html, но показывает в браузере иерархию папок)
JinSnow
73

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

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

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

Sammydo_55
источник
32

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

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

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

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

  • Введите Ctrl + Shift + P в VS Code и введите Configure Task Runner . Выберите его и нажмите Enter. Он откроет для вас файл 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
        }));
});
  • Теперь в VS Code введите Ctrl + Shift + P и введите «Run Task», когда вы введете его, вы увидите свою задачу «webserver» и нажмите Enter.

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

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

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

Влад Безден
источник
2
Я должен был бежать npm install -g gulp, npm install -g gulp-webserverи добавить переменную окружения NODE_PATH , что указывает на мой AppData \ НПМ \ node_modules. Тогда я смог запустить задачу веб-сервера, однако я получаю 404 при запуске браузера. Есть идеи, что мне не хватает?
Кирилл Осенков
2
Неважно, просто пришлось изменить «приложение» в вашем примере на «.» (так он служит из текущего каталога).
Кирилл Осенков
1
Один комментарий к ответу: если вы хотите запустить html-файл в вашем браузере, который автоматически перезагрузит изменения, ваш gulpfile.js должен выглядеть следующим образом с «.» вместо «приложения». Код = var gulp = require ('gulp'), веб-сервер = require ('gulp-webserver'); gulp.task ('webserver', function () {gulp.src ('.') .pipe (webserver ({fallback: 'index.html', livereload: true, open: true}));});
Friis1978
1
Это круто. Спасибо за объяснение этого как ценный вариант. Я также применил немного ответов Криля и Фриса, чтобы это сработало. Но это так!
Klewis
Я получал «Cannot GET /», потому что я копировал gulpfile.js без настройки строки gulp.src('app')так, чтобы она фактически указывала на мой источник (который был не /app«.»). Работает отлично. Спасибо!
22

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

Версия vscode: 1.10.2

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

Рул
источник
5
Это расширение получает ужасные отзывы.
Джон Кроуэлл
Это не обновляет браузер автоматически, и это не то, что ищет OP
Джуд Нирошан
18

Вот версия 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

noontz
источник
17

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

{
    "version": "0.1.0",
    "linux": {
        "command": "xdg-open"
    },
    "isShellCommand": true,
    "showOutput": "never",
    "args": ["${file}"]
}
Лорис
источник
6
Спасибо! Я пользователь Linux и чувствовал себя потерянным. Я хотел бы добавить, что нужно нажать, Ctrl + Shift + bчтобы запустить его в браузере. Для меня мнемоника была "b = browser". :-)
ankush981
Это работает, но кажется устаревшим, если у вас есть обновленная версия, спасибо
Бруно Л.
14

Шаг 1:

  1. Откройте Visual Studio Code, затем перейдите к расширениям.
  2. Ищите «открыть в браузере». введите описание изображения здесь

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

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

    Вот и все................................................ ......

Ринку Чоудхари
источник
9

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

Это поможет вам настроить локальный веб-сервер, известный как lite-server with 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-сервер следит за вашими файлами и обновляет страницу, как только вы вносите изменения в любые html, js или css файлы.

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

Ноты:

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

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

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

shaijut
источник
6

Если вы только на 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}"],
}

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

Суперагент
источник
4

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

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

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

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

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

Мистер перфекционист
источник
3

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

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

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

  1. Введите Configure Task Runner, при первом запуске VS Code выдаст вам прокручивающееся меню, если оно выберет «Other». Если вы сделали это раньше, 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.
Джо Меллин
источник
2

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

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

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

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

Андреас Д.М.
источник
Я получил это открытие content.screencast.com/users/Orphydian/folders/3ds%20max/media/…
2

Открытие файлов в браузере 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, введите задачу Opera и нажмите Enter

Хосе Карлос
источник
2

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

{
    "version": "0.1.0",

    "command": "explorer",

    "windows": {
        "command": "explorer.exe"
    },

    "args": ["{$file}"]
}

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

Сахар Бен-Шушан
источник
2

вот как вы можете запустить его в нескольких браузерах для 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 ... это только я, мне нравится просматривать его в частном окне

Абдель-Рахман Мухаммед
источник
Я копировал только tasksчасть. "args":["/C"]является то , что делает эту работу. Из любопытства, что это делает?
Райан Б.
1

Недавно наткнулся на эту функцию в одном из учебных пособий по 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 :)

Mrk
источник
1
Вопрос о том, как просматривать в браузере.
user5389726598465
1

Вот версия 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}"
      ]
    }
  ]
}
Элиандро
источник
0

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

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

вероятно, большинство из них сможет найти решение из приведенных выше ответов, но, видя, что ни один из них не работает для меня ( vscode v1.34), я подумал, что поделюсь своим опытом. если хотя бы один человек посчитает это полезным, круто не напрасно, amiirte ?


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

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

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

{
    "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}"
            ],
            "group": "build",
            "problemMatcher": []
        }
    ]
}

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


легко.

mad.meesh
источник
0

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

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Open Chrome",
      "type": "process",
      "windows": {
        "command": "${config:chrome.executable}"
      },
      "args": ["--user-data-dir=${config:chrome.profileDir}", "${input:url}"],
      "problemMatcher": []
    }
  ],
  "inputs": [
    {
      "id": "url",
      "description": "Which URL?",
      "default": "http://localhost:8080",
      "type": "promptString"
    }
  ]
}

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

{
  "label": "Open active file in Chrome",
  "type": "process",
  "command": "chrome.exe",
  "windows": {
    "command": "${config:chrome.executable}"
  },
  "args": ["--user-data-dir=${config:chrome.profileDir}", "${file}"],
  "problemMatcher": []
},

Ноты

  • при необходимости замените 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пользовательском или рабочем пространстве и настройте пути в соответствии с вашими потребностями:
"chrome.executable": "C:/Program Files (x86)/Google/Chrome/Application/chrome.exe",
"chrome.profileDir": "C:/My/Data/chrome/profile"
  • Вы можете повторно использовать эти переменные, например, в launch.jsonцелях отладки:"runtimeExecutable": "${config:chrome.executable}"
ford04
источник