Cum pentru a vizualiza codul HTML în browser-ul cu Codul Visual Studio?

Pentru Windows - Deschide Browser-ul Implicit - Testat pe VS Cod v 1.1.0

Răspunsul la ambele deschide un anumit fișier (numele este hard-coded) SAU de deschidere, ORICE alt fișier.

Etape:

1. Folosi ctrl + schimbare + p (sau F1) pentru a deschide Comanda Paletei.

2. Tip de în Sarcini: Configurați Sarcină sau pe versiuni mai vechiConfigura Sarcina Runner`. Selectarea se va deschide sarcini.json fișier. Șterge script afișate și înlocuiți-l cu următorul text:

{ "versiune": "0.1.0", "comanda": "explorer", "windows": { "comanda": "explorer.exe" }, "args": ["de testare.html"] }

Amintiți-vă pentru a schimba "args" secțiune de sarcini.fișier json pentru numele fișierului. Aceasta va deschide fișiere specifice, atunci când a lovit F5.

Puteți seta, de asemenea, acest lucru pentru a deschide orice fișier trebuie deschis la timp, prin utilizarea ["${fișier}"] ca valoare pentru "args". Rețineți că $ se în afara {...}, deci ["{$file}"] este incorect.

3. Salvați fișierul.

4. Comuta înapoi la fișier html (în acest exemplu l's "text.html"), și apăsați ctrl + schimbare + b pentru a vizualiza pagina în Browser-ul Web.

VS Cod are o Live Server Extindere care susțin un singur clic de lansare din bara de stare.

Unele dintre caracteristicile:

• O faceți Clic pe Lansare din Bara de Stare
• Live Reload
• Suport pentru Chrome Depanare Atașament

@InvisibleDev - pentru a obține acest lucru pe un mac încearcă, folosind asta:

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

Dacă aveți chrome deja deschis, se va lansa html fișier într-o filă nouă.

Dacă ar dori să aibă live reîncărcați, puteți utiliza înghițitură-server de web, care va uita-te pentru fișierul dvs. modificările și reîncărcați pagina, în acest fel nu't trebuie să apăsați F5 de fiecare dată pe pagina ta:

Aici este cum se face:

• Deschide command prompt (cmd) și de tip

npm install-salva-dev înghițitură-webserver

• Introduceți Ctrl+Shift+P în VS Cod și de tip Configura Sarcina Runner. Selectați-l și apăsați enter. Se va deschide sarcini.fișier json pentru tine. Scoateți totul de la capăt intra doar urmatorul cod

sarcini.json

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

• În directorul rădăcină al proiectului dumneavoastră adauga gulpfile.js și introduceți următorul cod:

gulpfile.js

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

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

• Acum, în VS Cod introduceți Ctrl+Shift+P și tip "Rula Sarcina" atunci când veți intra în el, veți vedea sarcina ta "web" selectat și apăsați enter.

Web va deschide pagina în browser-ul implicit. Acum, orice modificări pe care le va face la HTML sau CSS pagini vor fi reîncărcate automat.

Aici este informații cu privire la modul de a configura 'înghițitură-webserver' de exemplu, port, și la ce pagină să se încarce, ...

Puteți rula, de asemenea, sarcina dumneavoastră doar prin introducerea Ctrl+P și tip sarcina webserver

Acum puteți instala o extensie Vezi În Browser-ul. L-am testat pe windows cu chrome și este de lucru.

vscode versiune: 1.10.2

În linux, puteți utiliza xdg-open comandă pentru a deschide fișierul cu browser-ul implicit:

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

Aici este o versiunea 2.0.0 pentru documentul curent în Chrome w/ comandă rapidă de la tastatură:

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

Pentru a rula pe un server de web:

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

Eu sunt doar re-postarea pașii m-am folosit de la msdn-ul. Aceasta poate ajuta comunitatea.

Acest lucru vă va ajuta să configurarea unui server de web local cunoscut sub numele de lite-server cu VS Cod, și, de asemenea, vă ghidează pentru a găzdui static html fișiere în localhost și debug ta "Javascript" cod.

1. Instalați Node.js

Dacă nu este deja instalat, se obține aici

Acesta este dotat cu npm (managerul de pachete pentru achiziționarea și gestionarea de dezvoltare biblioteci)

2. Creați un folder nou pentru proiectul dvs.

Undeva în unitate, de a crea un folder nou pentru aplicația web.

3. Adauga un pachet.json fișier în directorul de proiect

Apoi copiați/lipiți următorul text:

{
   "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. Instalați serverul web

Într-o fereastră terminal (command prompt în Windows) deschis pe folderul de proiect, executați această comandă:

npm install

Acesta va instala lite-server (definite în pachet.json), un statice server care încarcă index.html în browser-ul implicit și auto reîmprospătează când dosarele de cerere schimbare.

5. Începe server web local!

(Presupunând că aveți un index.html fișierul în folderul de proiect).

În aceeași fereastră terminal (command prompt în Windows) pentru a efectua această comandă:

npm start

Stai o clipă și index.html este încărcat și afișat în browser-ul implicit servit de server web local!

lite-server este vizionarea fișierelor și reîmprospătează pagina de îndată ce vă face modificări la orice html, js sau css fișiere.

Și dacă aveți VS Cod configurat pentru a auto save (meniul Fișier / Salvare Automată), puteți vedea modificările în browser-ul în timp ce tastați!

Note:

• Nu inchideti command prompt în linie de comandă până când ați terminat de codificare în app pentru a doua zi
• Se deschide pe http://localhost:10001 dar aveți posibilitatea să modificați portul de editare pachet.fișier json.

Asta e. Acum, înainte de orice codificare sesiune doar de tip npm start și vă sunt bune pentru a merge!

Publicat inițial aici in msdn-ul. Creditele merge la Autor :@Laurent Duveau`

Daca're doar pe Mac acestei sarcini.json file:

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

...este tot ce ai nevoie pentru a deschide fișierul curent în Safari, presupunând extinderea acesteia este ".html".

Creați sarcini.json` așa cum este descris mai sus și invoca cu ⌘+schimbare+b.

Dacă doriți să deschideți în google Chrome, atunci:

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

Acest lucru va face ce vrei tu, la fel ca în deschidere într-o filă nouă în cazul în care aplicația este deja deschis.

Un singur clic soluție a instala pur și simplu deschide în browser-ul Extensiile de Visual Studio piata.

CTRL+SHIFT+P va aduce comanda paletei.
În funcție de ceea ce're de funcționare desigur. Exemplu, într-un ASP.net app aveți posibilitatea să tastați în:
>kestrel și apoi deschide browser-ul web și de tip înlocalhost:(portul tau aici)`.

Dacă tastați în "> " vă va arăta show și rula comenzi

Sau in cazul tau cu HTML, cred că "F5", după deschiderea comanda paleta ar trebui să deschideți depanatorul.

Sursa: [link][1]

Deschidere fișiere în browser-ul Opera (pe Windows pe 64 de biți). Trebuie doar să adăugați această linii:

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

Acorde o atenție la calea format pe "comanda": linie. Don't de a folosi "C:\path_to_exe\runme.exe" format.

Pentru a rula această sarcină, de a deschide fișierul html în care doriți să vizualizați, apăsați F1, tip sarcina opera și apăsați enter

meu runner scenariu arata ca :

{
    "version": "0.1.0",

    "command": "explorer",

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

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

și-l's-mi deschid explorer atunci când am apăsați ctrl shift b în index.html fișier

aici este cum puteți să-l rula în mai multe browsere pentru 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}"]
     }   
    ]
}

observați că nu am't tastați nimic în args pentru muchie pentru Muchia mea este browser-ul implicit doar i-a dat numele de fișier.

EDIT: de asemenea, nu't nevoie -incognito nici -privat-fereastra...l's doar eu, îmi place să o vizualizați într-o fereastră privată

Pentru Mac - Deschide Chrome - Testat pe VS Cod v 1.9.0

1. Folosi Command + schimbare + p pentru a deschide Comanda Paletei.

2. Tip în Configurarea Task Runner, prima dată când face acest lucru, VS Cod va da scroll down, dacă nu selectați "Altele." Dacă ați făcut acest lucru înainte, VS Cod va trimite direct la activități.json.

3. După ce în sarcini.fișier json. Șterge script afișate și înlocuiți-l cu următorul text:

{ "versiune": "0.1.0", "comanda": "Opera", "osx": { "comanda": "/Aplicații/Google Chrome.app/Contents/MacOS/Google Chrome" }, "args": ["${fișier}"] }

4. Comuta înapoi la fișier html și apăsați Command + Schimbare + b pentru a vizualiza pagina în google Chrome.

Pasul 1:

1. Deschide Visual Studio Cod, apoi du-te la extensii.
2. Căutare pentru "deschide în browser-ul".

3.Instalați-l.

4.Faceți clic dreapta pe fișier html,veți găsi opțiunea "Deschide în Browser-ul".

Ca's Toate......................................................

Recent am dat peste această caracteristică într-una din codul visual studio tutorial în www.lynda.com

Apăsați Ctrl + K, urmat de M, se va deschide "Selectați Limba Mode" ( sau faceți clic pe colțul din dreapta jos pe care scrie HTML înainte de asta smiley ), tip markdown și apăsați enter

Acum, Apăsați Ctrl + K, urmat de V, se va deschide html în apropiere de tab.

Tadaaa !!!

Acum emmet comenzi nu au fost de lucru în acest mod în fișier html, așa că am mers înapoi la starea inițială ( notă - tag-ul html tellisense au fost de lucru perfect )

Pentru a merge la starea inițială - Apăsați Ctrl + K, urmat de M, selectați auto-detecta. emmet comenzi început să lucreze. Dacă sunteți mulțumit cu doar html viewer, atunci nu este nevoie pentru tine de a veni înapoi la starea inițială.

Mă întreb de ce vscode nu are vizualizator html opțiune implicită, atunci când acesta este capabil să dispaly fișierul html în markdown modul.

Oricum este rece. Fericit vscoding :)

Aici este versiunea 2.0.0 pentru 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 se va deschide browser-ul implicit. alternativ, puteți apăsa tastele Ctrl + shift + P pentru a deschide fereastra de comandă și selectați "View in Browser-ul". Codul html trebuie să fie salvate într-un fișier (nesalvate codul de pe redactorul - fără extensie, nu't de lucru)

cel mai probabil va fi capabil să găsească o soluție din raspunsurile de mai sus dar vazand ca nici unul nu a lucrat pentru mine (vscode v1.34) am crezut că am'd împărtășesc experiența mea. dacă cel puțin o persoană consideră că este util apoi, rece, nu o pierdere de post, amiirte?

oricum, soluția mea ("ferestre") este construit un top-de @noontz's. lui de configurare ar fi fost suficiente pentru versiunile mai vechi de vscode dar nu cu 1.34` (cel puțin, nu am putut't să-l de lucru ..).

nostru configs sunt aproape identice salva o proprietate unică-că proprietatea de a fi, proprietate "grup". am'm nu sunt sigur de ce, dar fără acest lucru, sarcina mea nu ar apărea chiar și în comanda paletei.

deci. un lucru sarcini.json pentru "ferestre" utilizatorii care rulează vscode 1.34:

json { "versiune": "2.0.0", "sarcini": [ { "eticheta": "Opera", "tip": "procesul", "comanda": "chrome.exe", "windows": { "comanda": "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe" }, "args": [ "${fișier}" ], "grup": "construi", "problemMatcher": [] } ] }

rețineți că problemMatcher de proprietate nu este necesară pentru acest lucru, dar fără o suplimentare manual pas este impusă. a încercat să citească documente pe această proprietate, dar am'm prea gros pentru a înțelege. să sperăm că cineva va veni și despre școala de mine, dar da, multumesc anticipat pentru asta. tot ce știu este ... include această proprietate șictrl+shift+bdeschide curenthtmlfișier într-o nouchrome` tab, fără griji.

ușor.