Jak wyświetlić plik HTML w przeglądarce za pomocą programu Visual Studio Code

Jak mogę wyświetlić mój kod HTML w przeglądarce za pomocą nowego kodu Microsoft Visual Studio Code?

W Notepad ++ masz opcję Uruchom w przeglądarce. Jak mogę zrobić to samo z Visual Studio Code?

W systemie Windows - Otwórz domyślną przeglądarkę - przetestowano na VS Code v 1.1.0

Odpowiedz zarówno na otwarcie określonego pliku (nazwa jest zakodowana na stałe), jak i otwarcie KAŻDEGO innego pliku.

Kroki:

1. Użyj ctrl+ shift+ p(lub F1), aby otworzyć paletę poleceń.

2. Wpisz Tasks: Configure Tasklub w starszych wersjach Configure Task Runner. Wybranie go spowoduje otwarcie pliku tasks.json . Usuń wyświetlony skrypt i zastąp go następującym:

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

   Pamiętaj, aby zmienić sekcję „args” pliku tasks.json na nazwę pliku. To zawsze otworzy ten konkretny plik po naciśnięciu F5.

   Możesz także ustawić, aby otwierał dowolny plik, który miałeś w tym czasie, używając ["${file}"]jako wartości „args”. Zauważ, że to $wychodzi poza {...}, więc ["{$file}"]jest niepoprawne.

3. Zapisz plik.

4. Wróć do pliku HTML (w tym przykładzie jest to „text.html”) i naciśnij ctrl+ shift+, baby wyświetlić stronę w przeglądarce internetowej.

Kod VS ma rozszerzenie Live Server które obsługuje uruchamianie jednym kliknięciem z paska stanu.

Niektóre funkcje:

• Uruchamianie jednym kliknięciem z paska stanu
• Live Reload
• Obsługa załącznika do debugowania Chrome

@InvisibleDev - aby uruchomić to na komputerze Mac, próbując użyć tego:

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

Jeśli masz już Chrome, otworzy plik HTML w nowej karcie.

Jeśli chcesz przeładować na żywo, możesz użyć gulp-webserver, który będzie obserwował twoje zmiany plików i przeładował stronę, w ten sposób nie musisz naciskać F5 za każdym razem na swojej stronie:

Oto jak to zrobić:

• Otwórz wiersz polecenia (cmd) i wpisz

  npm install --save-dev gulp-webserver

• Wpisz Ctrl + Shift + P w VS Code i wpisz Configure Task Runner . Wybierz i naciśnij enter. Otworzy się dla ciebie plik tasks.json. Usuń wszystko z tego końca, wpisz tylko następujący kod

tasks.json

{
    "version": "0.1.0",
    "command": "gulp",
    "isShellCommand": true,
    "args": [
        "--no-color"
    ],
    "tasks": [
        {
            "taskName": "webserver",
            "isBuildCommand": true,
            "showOutput": "always"
        }
    ]
}

• W katalogu głównym swojego projektu dodaj gulpfile.js i wprowadź następujący kod:

gulpfile.js

var gulp = require('gulp'),
    webserver = require('gulp-webserver');

gulp.task('webserver', function () {
    gulp.src('app')
        .pipe(webserver({
            livereload: true,
            open: true
        }));
});

• Teraz w VS Code wpisz Ctrl + Shift + P i wpisz „Uruchom zadanie”. Po wprowadzeniu zobaczysz zaznaczone zadanie „serwer WWW” i naciśnij enter.

Twój serwer internetowy otworzy teraz twoją stronę w domyślnej przeglądarce. Teraz wszelkie zmiany, które wprowadzisz na stronach HTML lub CSS, zostaną automatycznie ponownie załadowane.

Oto informacje o tym, jak skonfigurować „gulp-webserver” na przykład port i jaką stronę załadować, ...

Możesz także uruchomić swoje zadanie, wpisując Ctrl + P i wpisując webserver zadania

Możesz teraz zainstalować rozszerzenie Wyświetl w przeglądarce . Przetestowałem to na Windowsie z chromem i działa.

wersja vscode: 1.10.2

Oto wersja 2.0.0 bieżącego dokumentu w Chrome ze skrótem klawiaturowym:

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"
}

Do uruchomienia na serwerze WWW:

https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

W systemie Linux możesz użyć xdg-openpolecenia, aby otworzyć plik w domyślnej przeglądarce:

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

Krok 1:

1. Otwórz program Visual Studio Code, a następnie przejdź do rozszerzeń.

2. Wyszukaj „otwórz w przeglądarce”.

   3. Zainstaluj.

   4. Kliknij prawym przyciskiem myszy plik html, znajdziesz opcję „Otwórz w przeglądarce”.

   To wszystko................................................ ......

Właśnie publikuję ponownie kroki, których użyłem na msdnblogu. Może pomóc społeczności.

Pomoże to w konfiguracji lokalnego serwera WWW znany jako lite-serwer z VS Code, a także prowadzi użytkownika do organizacji statyczne htmlpliki localhosti debugswój Javascriptkod.

1. Zainstaluj Node.js

Jeśli jeszcze nie został zainstalowany, pobierz go tutaj

Pochodzi z npm (menedżer pakietów do pozyskiwania bibliotek programistycznych i zarządzania nimi)

2. Utwórz nowy folder dla swojego projektu

Gdzieś na dysku utwórz nowy folder dla swojej aplikacji internetowej.

3. Dodaj plik package.json do folderu projektu

Następnie skopiuj / wklej następujący tekst:

{
   "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. Zainstaluj serwer WWW

W oknie terminala (wiersz polecenia w systemie Windows) otwartym w folderze projektu uruchom następujące polecenie:

npm install

Spowoduje to zainstalowanie lite-server (zdefiniowanego w package.json), statycznego serwera, który ładuje index.html w domyślnej przeglądarce i automatycznie odświeża go po zmianie plików aplikacji.

5. Uruchom lokalny serwer WWW!

(Zakładając, że masz plik index.html w folderze projektu).

W tym samym oknie terminala (wiersz polecenia w systemie Windows) uruchom następujące polecenie:

npm start

Poczekaj sekundę, a plik index.html zostanie załadowany i wyświetlony w domyślnej przeglądarce obsługiwanej przez lokalny serwer internetowy!

lite-server ogląda twoje pliki i odświeża stronę, jak tylko wprowadzisz zmiany w plikach HTML, JS lub CSS.

A jeśli masz skonfigurowany kod VS do automatycznego zapisywania (menu Plik / Automatyczne zapisywanie), zobaczysz zmiany w przeglądarce podczas pisania!

Uwagi:

• Nie zamykaj wiersza polecenia, dopóki nie zakończysz kodowania w aplikacji na dany dzień
• Otwiera się na http: // localhost: 10001, ale można zmienić port, edytując plik package.json.

Otóż ​​to. Teraz przed każdą sesją kodowania po prostu wpisz npm start i możesz zacząć!

Pierwotnie opublikowany tutaj na msdnblogu. Kredyty trafiają do autora:@Laurent Duveau

Jeśli korzystasz tylko z komputera Mac, ten tasks.jsonplik:

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

... to wszystko, czego potrzebujesz, aby otworzyć bieżący plik w przeglądarce Safari, zakładając, że jego rozszerzenie to „.html”.

Utwórz tasks.jsonzgodnie z powyższym opisem i wywołaj go za pomocą ⌘+ shift+ b.

Jeśli chcesz, aby otworzył się w Chrome:

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

To zrobi, co chcesz, na przykład otwierając nową kartę, jeśli aplikacja jest już otwarta.

Rozwiązanie jednym kliknięciem wystarczy zainstalować rozszerzenia Open-in-browser z rynku Visual Studio.

Zaktualizowana odpowiedź w dniu 18 kwietnia 2020 r

Kliknij tę ikonę zarządzania lewy dolny . Kliknij Rozszerzenia lub SkrótCtrl+Shift+X

Następnie Wyszukaj w rozszerzeniu za pomocą tego zdania kluczowego Otwórz w domyślnej przeglądarce . Znajdziesz to rozszerzenie. Dla mnie jest lepiej.

Teraz kliknij htmlplik prawym przyciskiem myszy , a zobaczysz Otwórz w domyślnej przeglądarce lub Skrót, Ctrl+1aby zobaczyć htmlplik w przeglądarce.

Na komputery Mac - otwiera się w Chrome - testowano na VS Code v 1.9.0

1. Użyj Command+ shift+, paby otworzyć paletę poleceń.

2. Wpisz Configure Task Runner, przy pierwszym wykonaniu VS Code wyświetli menu przewijania w dół, jeśli wybierze „Inne”. Jeśli zrobiłeś to wcześniej, VS Code wyśle ​​cię bezpośrednio do tasks.json.

3. Raz w pliku tasks.json. Usuń wyświetlony skrypt i zastąp go następującym:

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

4. Wróć do pliku HTML i naciśnij Command+ Shift+, baby wyświetlić stronę w Chrome.

CTRL+SHIFT+Pwyświetli paletę poleceń.
Oczywiście w zależności od tego, co prowadzisz. Przykład w aplikacji ASP.net, w której możesz wpisać:
>kestrela następnie otworzyć przeglądarkę internetową i wpisać localhost:(your port here).

Jeśli wpiszesz >to pokaże ci polecenia show i run

Lub w przypadku HTML, myślę, że F5po otwarciu palety poleceń powinien otworzyć debugger.

Źródło: link

Otwieranie plików w przeglądarce Opera (w systemie Windows 64 bity). Po prostu dodaj te linie:

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

Zwróć uwagę na format ścieżki w wierszu „command” :. Nie używaj formatu „C: \ path_to_exe \ runme.exe”.

Aby uruchomić to zadanie, otwórz plik HTML, który chcesz wyświetlić, naciśnij F1, wpisz opera zadania i naciśnij enter

mój skrypt runner wygląda następująco:

{
    "version": "0.1.0",

    "command": "explorer",

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

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

i po prostu otwieram mój Eksplorator, kiedy wciskam Ctrl Shift B w moim pliku index.html

oto jak możesz go uruchomić w wielu przeglądarkach dla systemu 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}"]
     }   
    ]
}

zauważ, że nie wpisałem niczego w args dla edge, ponieważ Edge jest moją domyślną przeglądarką, która właśnie nadała mu nazwę pliku.

EDYCJA: także nie potrzebujesz -incognito ani -prywatnego-okna ... to tylko ja lubię oglądać to w prywatnym oknie

Ostatnio natknąłem się na tę funkcję w jednym z samouczków do kodu studia wizualnego na www.lynda.com

Naciśnij Ctrl + K, a następnie M, otworzy się „Wybierz tryb językowy” (lub kliknij prawy dolny róg z napisem HTML przed buźką), wpisz markdown i naciśnij enter

Teraz naciśnij Ctrl + K, a następnie V, otworzy się twój html w zakładce obok.

Tadaaa !!!

Teraz polecenia emmet nie działały w tym trybie w moim pliku HTML, więc wróciłem do pierwotnego stanu (uwaga - tag tellisense HTML działał idealnie)

Aby przejść do stanu oryginalnego - naciśnij Ctrl + K, a następnie M, wybierz automatyczne wykrywanie. polecenia emmet zaczęły działać. Jeśli jesteś zadowolony z przeglądarki tylko w formacie HTML, nie musisz wracać do pierwotnego stanu.

Zastanawiam się, dlaczego vscode nie ma domyślnie opcji przeglądarki HTML, kiedy jest w stanie wyświetlić plik HTML w trybie przeceny.

W każdym razie jest fajnie. Happy vscoding :)

Oto wersja 2.0.0 dla 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 otworzy domyślną przeglądarkę. alternatywnie możesz nacisnąć Ctrl + Shift + P, aby otworzyć okno poleceń i wybrać „Wyświetl w przeglądarce”. Kod HTML musi być zapisany w pliku (niezapisany kod w edytorze - bez rozszerzenia nie działa)

prawdopodobnie większość będzie w stanie znaleźć rozwiązanie z powyższych odpowiedzi, ale widząc, jak żadne z nich nie działało dla mnie ( vscode v1.34), pomyślałem, że podzielę się swoim doświadczeniem. jeśli przynajmniej jedna osoba uzna to za pomocne, fajnie, nie zmarnowany post, amiirte ?

w każdym razie moje rozwiązanie ( windows) jest zbudowane na szczycie @ noontz's. jego konfiguracja mogła być wystarczająca dla starszych wersji, vscodeale nie z1.34 (przynajmniej nie mogłem go uruchomić ..).

nasze konfiguracje są prawie identyczne, z wyjątkiem jednej właściwości - tą właściwością jestgroup właściwością. nie jestem pewien dlaczego, ale bez tego moje zadanie nie pojawiłoby się nawet w palecie poleceń.

więc. działający tasks.jsondla windowsużytkowników działających 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": []
        }
    ]
}

należy pamiętać, że problemMatcherwłaściwość nie jest wymagana do tego, aby działała, ale bez niej nałożony zostanie na ciebie dodatkowy ręczny krok. próbowałem przeczytać dokumenty dotyczące tej właściwości, ale jestem zbyt gruby, aby zrozumieć. mam nadzieję, że ktoś przyjdzie i mnie szkoli, ale tak, z góry dzięki za to. wszystko, co wiem to - dołącz tę właściwość i ctrl+shift+botwórz bieżący htmlplik w nowej chromekarcie, bezproblemowo.

łatwo.

Otwórz niestandardowego Chrome z adresem URL z monitu

{
  "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"
    }
  ]
}

Otwórz niestandardowy Chrome z aktywnym plikiem

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

Notatki

• w razie potrzeby zastąp windowswłaściwość innym systemem operacyjnym
• zamień ${config:chrome.executable}na niestandardową lokalizację chrome, np"C:/Program Files (x86)/Google/Chrome/Application/chrome.exe"
• zamień na ${config:chrome.profileDir}swój katalog chromowanych profili klienta, np "C:/My/Data/chrome/profile" lub pomiń go
• Możesz zachować zmienne jak wyżej, jeśli chcesz. Aby to zrobić, dodaj następujące wpisy w polu settings.json- użytkownik lub obszar roboczy - dostosuj ścieżki do swoich potrzeb:

"chrome.executable": "C:/Program Files (x86)/Google/Chrome/Application/chrome.exe",
"chrome.profileDir": "C:/My/Data/chrome/profile"

• Możesz ponownie użyć tych zmiennych, np. launch.jsonDo celów debugowania:"runtimeExecutable": "${config:chrome.executable}"