Як переглянути HTML-файл у браузері з кодом Visual Studio

Як я можу переглянути свій HTML-код у браузері за допомогою нового коду Microsoft Visual Studio?

За допомогою Notepad ++ у вас є можливість запустити в браузері. Як я можу зробити те ж саме з кодом Visual Studio?

Для Windows - Відкрийте браузер за замовчуванням - Тестується на VS Code v 1.1.0

Відповідь на відкриття конкретного файлу (ім'я жорстко закодовано) АБО відкриття будь-якого іншого файлу.

Кроки:

1. Використовуйте ctrl+ shift+ p(або F1), щоб відкрити палітру команд.

2. Введіть Tasks: Configure Taskабо на старих версіях Configure Task Runner. Вибравши його, відкриється файл task.json . Видаліть скрипт, що відображається, і замініть його наступним:

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

   Не забудьте змінити розділ "аргументи" файлу task.json на ім'я вашого файлу. Це завжди відкриє цей конкретний файл, коли ви натиснете F5.

   Ви також можете встановити це, щоб відкрити той файл, який ви відкрили в той час, використовуючи ["${file}"]як значення для "args". Зауважте, що $виходити за межі {...}, тому ["{$file}"]невірно.

3. Збережіть файл.

4. Поверніться до свого HTML-файлу (у цьому прикладі це "text.html") та натисніть ctrl+ shift+, bщоб переглянути свою сторінку у веб-браузері.

Код VS має розширення сервера Live, яке підтримує запуск одного клацання з рядка стану.

Деякі функції:

• Запуск одним клацанням у рядку стану
• Live Reload
• Підтримка додатку для налагодження Chrome

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

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

Якщо у вас уже відкритий хром, він запустить ваш html-файл на новій вкладці.

Якщо ви хочете мати оновлення в реальному часі, ви можете використовувати gulp-веб-сервер, який буде стежити за змінами файлу та сторінкою перезавантаження, таким чином вам не доведеться щоразу натискати F5 на своїй сторінці:

Ось як це зробити:

• Відкрийте командний рядок (cmd) та введіть

  npm install --save-dev gulp-webserver

• Введіть Ctrl + Shift + P у код VS та введіть Налаштувати запуск завдання . Виберіть його та натисніть клавішу Enter. Він відкриє файл task.json для вас. Видаліть усе з цього кінця, введіть лише наступний код

task.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 введіть Ctrl + Shift + P і введіть "Запустити завдання", коли ви введете його, ви побачите вибране завдання "веб-сервер" і натисніть клавішу Enter.

Тепер ваш веб-сервер відкриє вашу сторінку у вашому браузері за замовчуванням. Тепер будь-які зміни, які ви зробите на своїх HTML або CSS сторінках, будуть автоматично завантажені.

Ось інформація про те, як налаштувати 'gulp-webserver' наприклад для порту, і яку сторінку завантажити, ...

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

Тепер ви можете встановити розширення View In Browser . Я протестував це на вікнах з хромом і він працює.

версія коду: 1.10.2

Ось версія 2.0.0 для поточного документа в комбінації клавіш w / клавіатури:

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

У Linux можна скористатися xdg-openкомандою, щоб відкрити файл за допомогою браузера за замовчуванням:

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

Крок 1:

1. Відкрийте Visual Studio Code, а потім перейдіть до розширень.

2. Шукати "відкрити в браузері".

   3.Встановіть його.

   4. Правим клацанням на ваш html-файл ви знайдете опцію "Відкрити в браузері".

   Це все................................................ ......

Я просто повторно публікую кроки, використані в msdnблозі. Це може допомогти громаді.

Це допоможе вам налаштувати локальний веб - сервер , відомий як полегшений-сервер з 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 для автоматичного збереження (меню Файл / Автозбереження), ви бачите зміни в браузері під час введення!

Примітки:

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

Це воно. Тепер перед будь-яким сеансом кодування просто введіть npm start, і ви добре піти!

Спочатку розміщено тут у msdnблозі. Кредити належать Автору:@Laurent Duveau

Якщо ви просто на 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}"],
}

Це зробить все, що ви хочете, як на відкритті на новій вкладці, якщо програма вже відкрита.

Рішенням одним клацанням миші просто встановіть розширення з відкритим в браузері на ринку Visual Studio.

Оновлений відповідь 18 квітня 2020 року

Клацніть на піктограмі керування зліва внизу . Клацніть розширення або скороченняCtrl+Shift+X

Потім шукайте в розширенні за допомогою цього ключового речення. Відкрийте браузер за замовчуванням . Ви знайдете це розширення. Краще мені.

Тепер клацніть правою кнопкою миші на htmlфайлі, і ви побачите Відкрити в браузері за замовчуванням або Швидкий доступ, Ctrl+1щоб побачити htmlфайл у браузері.

Для Mac - відкривається в Chrome - Тестується на VS Code v 1.9.0

1. Використовуйте Command+ shift+, pщоб відкрити палітру команд.

2. Введіть пункт Налаштувати запуск завдання, коли перший раз ви це зробите, код VS надасть вам меню прокрутки вниз, якщо воно вибере "Інше". Якщо ви робили це раніше, код VS буде просто надсилати вас безпосередньо до task.json.

3. Опинившись у файлі task.json. Видаліть скрипт, що відображається, і замініть його наступним:

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

4. Поверніться назад до свого HTML-файлу та натисніть Command+ Shift+, bщоб переглянути свою сторінку в Chrome.

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

Якщо ви введете >його, він покаже вам шоу та запустіть команди

Або у вашому випадку з HTML, я думаю, що F5після відкриття палітри команд слід відкрити налагоджувач.

Джерело: посилання

Відкриття файлів у браузері Opera (у Windows 64 біт). Просто додайте ці рядки:

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

Зверніть увагу на формат шляху в рядку "command":. Не використовуйте формат "C: \ path_to_exe \ runme.exe".

Щоб виконати це завдання, відкрийте файл html, який ви хочете переглянути, натисніть F1, введіть операцію завдання та натисніть клавішу 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}"]
     }   
    ]
}

зауважте, що я нічого не вводив у аргументи для краю, тому що Edge - мій браузер за замовчуванням, просто дав йому ім'я файлу.

EDIT: також вам не потрібно -incognito nor -private-window ... це просто я люблю переглядати це в приватному вікні

Нещодавно натрапив на цю функцію в одному з навчальних посібників з візуальної студії на www.lynda.com

Натисніть Ctrl + K, а потім M, відкриється "Вибір режиму мови" (або натисніть правий нижній кут, на якому написано HTML перед цим смайликом), введіть розмітку та натисніть клавішу Enter

Тепер натисніть Ctrl + K, а потім V, він відкриє ваш HTML у вкладці поблизу.

Тадааа !!!

Тепер команди emmet не працювали в такому режимі в моєму html-файлі, тому я повернувся до початкового стану (зверніть увагу - htis тег Tellisense працював ідеально)

Щоб перейти до початкового стану - Натисніть Ctrl + K, а потім M, виберіть автоматичне виявлення. Команди emmet почали працювати. Якщо ви задоволені програмою перегляду лише у форматі HTML, тоді вам не потрібно повертатися до початкового стану.

Цікаво, чому vscode за замовчуванням не має можливості перегляду html, коли він може розповсюджувати файл HTML у режимі розмітки.

У будь-якому випадку це круто. Щасливий vscoding :)

Ось версія 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 ?

у будь-якому випадку, моє рішення ( 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вкладці, без проблем.

легко.

Відкрийте користувацький 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}на власне хромоване розташування, наприклад"C:/Program Files (x86)/Google/Chrome/Application/chrome.exe"
• замініть ${config:chrome.profileDir}на ваш каталог профілю chrome 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}"