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

266

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?

Ninjakannon
źródło
7
VS Code ma teraz rozszerzenie Live Server. Proszę zobaczyć moją odpowiedź: stackoverflow.com/a/48721885/466066
Jose Cherian
3
Rozszerzenie serwera Live działało dla mnie. Nie chcę konfigurować żadnych plików, aby to zrobić.
AGDM
powiązane również: stackoverflow.com/questions/47519768/…
ford04

Odpowiedzi:

209

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.

wprowadź opis zdjęcia tutaj

yushulx
źródło
16
Możesz nawet używać zmiennych, jeśli masz więcej niż jeden plik HTML. Możesz zrobić: „args”: [„{$ file}”], aby przekazać bieżący otwarty plik. Zobacz także code.visualstudio.com/Docs/tasks#_variables-in-tasksjson
Dirk Bäumer
7
Jak to zrobić na komputerze Mac? Brak plików exe. Chciałbym otworzyć stronę chromowaną na Macu
InvisibleDev
3
właśnie pojawia się komunikat „Nie udało się uruchomić zewnętrznego programu chrome {$ file}. spawn chrome ENOENT”
johny, dlaczego
7
Aby skonfigurować zadanie w nowym folderze: Wybierz polecenie Zadania: Skonfiguruj program Run Run, a zobaczysz listę szablonów programu uruchamiającego zadania. Wybierz Inne, aby utworzyć zadanie uruchamiające zewnętrzne polecenie. . . . Powinieneś teraz zobaczyć plik tasks.json w folderze .vscode obszaru roboczego z następującą zawartością :. . . autor: code.visualstudio.com/Docs/editor/tasks
yu yang Jian
5
Skonfiguruj Runner zadań nie jest już obecny w VSC 1.24.0 - Control-Shift-P nie zwraca żadnych wyników dla tego ciągu.
lonstar
110

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

wprowadź opis zdjęcia tutaj

Jose Cherian
źródło
8
To rozszerzenie ma również dodatek internetowy, który zapewnia funkcję automatycznego przeładowywania stron dynamicznych.
M. Sundstrom
@ M.Sundstrom, czy możesz podać mi nazwę / link do tego dodatku?
Adil Saju,
2
Nadal bardzo przydatne, a zwłaszcza całkowicie wolne od konfiguracji!
Jonas,
2
Nie jest to zalecane w przypadku złożonych stron, być może dobre dla nowych programistów
Yasser Jarouf,
1
ale wygląda na to, że nie możesz wyświetlić podglądu niezapisanego aktywnego pliku, prawda? (Uruchomienie go nie wyświetla podglądu html, ale pokazuje w przeglądarce hierarchię folderów)
JinSnow
73

@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.

Sammydo_55
źródło
32

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

Vlad Bezden
źródło
2
Musiałem metę npm install -g gulp, npm install -g gulp-webserveri dodać zmienną środowiskową NODE_PATH że wskazuje na mój AppData \ npm \ node_modules. Potem mogłem uruchomić zadanie serwera WWW, ale dostaję 404 po uruchomieniu przeglądarki. Wiesz, czego mi brakuje?
Kirill Osenkov
2
Nieważne, po prostu musiałem zmienić „aplikację” w twoim przykładzie na „”. (więc służy z bieżącego katalogu).
Kirill Osenkov,
1
Jeden komentarz do odpowiedzi: Jeśli chcesz uruchomić plik HTML w przeglądarce, która automatycznie przeładuje zmiany, plik gulpfile.js powinien wyglądać następująco: „.” zamiast „aplikacji”. Code = var gulp = wymagają („gulp”), webserver = wymagają („gulp-webserver”); gulp.task ('webserver', function () {gulp.src ('.') .pipe (webserver ({fallback: 'index.html', livereload: true, open: true}));});
Friis1978,
1
To jest niesamowite. Dziękujemy za wyjaśnienie tego jako wartościowej opcji. Zastosowałem też trochę odpowiedzi zarówno Krilla, jak i Friisa, aby to zadziałało. Ale tak jest!
klewis
Otrzymywałem komunikat „Cannot GET /”, ponieważ skopiowałem plik gulpfile.js bez konfigurowania wiersza gulp.src('app')tak, aby faktycznie wskazywał na moje źródło (które nie było /appale „.”). Działa idealnie. Dzięki!
22

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

wprowadź opis zdjęcia tutaj

Roel
źródło
5
To rozszerzenie dostaje okropne recenzje.
Jon Crowell,
To nie automatycznie odświeża przeglądarkę i nie tego szuka OP
Jude Niroshan
18

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

noontz
źródło
17

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}"]
}
Loris
źródło
6
Dzięki! Jestem użytkownikiem Linuksa i czułem się zagubiony. Chciałbym dodać, że należy nacisnąć, Ctrl + Shift + baby uruchomić go w przeglądarce. Dla mnie mnemonik to „b = przeglądarka”. :-)
ankush981
Działa, ale wydaje się przestarzałe, jeśli masz zaktualizowaną wersję, dziękuję
Bruno L.
14

Krok 1:

  1. Otwórz program Visual Studio Code, a następnie przejdź do rozszerzeń.
  2. Wyszukaj „otwórz w przeglądarce”. wprowadź opis zdjęcia tutaj

    3. Zainstaluj.

    4. Kliknij prawym przyciskiem myszy plik html, znajdziesz opcję „Otwórz w przeglądarce”. wprowadź opis zdjęcia tutaj

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

rinku Choudhary
źródło
9

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

Shaijut
źródło
6

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.

Sez
źródło
4

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

Manish Sharma
źródło
4

Zaktualizowana odpowiedź w dniu 18 kwietnia 2020 r

wprowadź opis zdjęcia tutaj

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.

Pan Perfekcjonista
źródło
3

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

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

wprowadź opis zdjęcia tutaj

  1. 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.

  2. 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}"]
}
  1. Wróć do pliku HTML i naciśnij Command+ Shift+, baby wyświetlić stronę w Chrome.
Joe Mellin
źródło
2

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

Andreas DM
źródło
2

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

Jose Carlos
źródło
2

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

Sahar Ben-Shushan
źródło
2

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

Abdel-Rahman Muhammed
źródło
Kopiowałem tylko tasksczęść. "args":["/C"]co czyni tę pracę. Z ciekawości, co to robi?
Ryan B
1

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 :)

Mrk
źródło
1
Pytanie dotyczy sposobu przeglądania w przeglądarce.
user5389726598465
1

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}"
      ]
    }
  ]
}
Eliandro
źródło
0

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)

PersyJack
źródło
1
Jakiej wersji Visual Studio Code używasz? Te polecenia nie działają w mojej właśnie zaktualizowanej wersji 1.8.1. Ctrl + F1 nic nie robi i nie mam opcji Wyświetl w przeglądarce na palecie poleceń. Może masz w swoich zadaniach coś poza domyślnie zainstalowanymi lub dodatkowymi zadaniami. Json?
jla
Mam tę samą wersję, ale zdałem sobie sprawę, że zainstalowałem dla niej rozszerzenie. Jest to: marketplace.visualstudio.com/…
PersyJack
0

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.

mad.meesh
źródło
0

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}"
ford04
źródło