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

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

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

Ответ 1

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

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

шаги:

Используйте ctrl + shift + p (или F1), чтобы открыть палитру команд.
Введите " 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}"] неверно.
Сохраните файл.
Вернитесь к html файлу (в данном примере это "text.html") и нажмите ctrl + shift + b, чтобы просмотреть свою страницу в веб-браузере.

Ответ 2

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

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

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

Ответ 3

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

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

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

Ответ 4

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

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

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

npm install --save-dev gulp -webserver
Введите Ctrl + Shift + P в коде VS и введите Настроить запуск задачи. Выберите его и нажмите клавишу ввода. Он откроет для вас файл 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 и введите "Запустить задачу", когда вы входите в нее, вы увидите свою задачу "веб-сервер" и нажмите клавишу ввода.

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

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

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

Ответ 5

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

версия vscode: 1.10.2

Ответ 6

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

{
    "version": "0.1.0",
    "linux": {
        "command": "xdg-open"
    },
    "isShellCommand": true,
    "showOutput": "never",
    "args": ["${file}"]
}

Ответ 7

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

Ответ 8

Я просто повторяю шаги, которые я использовал из блога 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-сервер (определенный в 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: @Laurent Duveau

Ответ 9

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

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

Ответ 10

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

Ответ 11

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

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

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

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

Ответ 12

Открытие файлов в браузере 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

Ответ 13

мой бегун script выглядит следующим образом:

{
    "version": "0.1.0",

    "command": "explorer",

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

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

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

Ответ 14

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

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

Ответ 15

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

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

Введите Configure Task Runner, в первый раз, когда вы это сделаете, код VS даст вам меню прокрутки вниз, если оно выберет "Другое". Если вы это сделали раньше, VS Code просто отправит вас непосредственно на tasks.json.
Один раз в файле tasks.json. Удалите отображаемый script и замените его на:

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

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

Ответ 16

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

Ответ 17

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

Ответ 18

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

Ответ 19

Для будущих разработчиков, которые придут сюда в поисках решения. Это удивительное расширение, которое довольно недавно называется Browser Preview от Кеннета Аухенберга, вы можете получить расширение с рынка. Как начать, вы можете проверить это репо, как начать с предварительного просмотра браузера

Ответ 20

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

Во всяком случае, мое решение (windows) построено на вершине @noontz's. его конфигурации, возможно, было достаточно для более старых версий 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, без проблем.

легко.

Ответ 21

Шаг 1:

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

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

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

Это все......................................................

Ответ 22

Откройте пользовательский 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": []
},

Notes

при необходимости замените свойство 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}"

Ответ 23

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