Come posso visualizzare il mio codice HTML in un browser con il nuovo codice di Microsoft Visual Studio?
Con Notepad ++ hai la possibilità di eseguire in un browser. Come posso fare la stessa cosa con Visual Studio Code?
Come posso visualizzare il mio codice HTML in un browser con il nuovo codice di Microsoft Visual Studio?
Con Notepad ++ hai la possibilità di eseguire in un browser. Come posso fare la stessa cosa con Visual Studio Code?
Risposte:
Per Windows - Apri il browser predefinito - Testato su VS Code v 1.1.0
Rispondere sia all'apertura di un file specifico (il nome è hardcoded) sia all'apertura di QUALSIASI altro file.
passi:
Usa ctrl+ shift+ p(o F1) per aprire la Tavolozza comandi.
Digita Tasks: Configure Task
o su versioni precedenti Configure Task Runner
. Selezionandolo si aprirà il file task.json . Elimina lo script visualizzato e sostituiscilo con il seguente:
{
"version": "0.1.0",
"command": "explorer",
"windows": {
"command": "explorer.exe"
},
"args": ["test.html"]
}
Ricorda di cambiare la sezione "args" del file task.json con il nome del tuo file. Questo aprirà sempre quel file specifico quando premi F5.
Puoi anche impostare questo per aprire qualunque file tu abbia aperto in quel momento usando ["${file}"]
come valore per "args". Nota che $
va oltre {...}
, quindi ["{$file}"]
non è corretto.
Salva il file.
Torna al tuo file html (in questo esempio è "text.html") e premi ctrl+ shift+ bper visualizzare la tua pagina nel tuo browser web.
VS Code ha un'estensione di Live Server che supporta l'avvio con un clic dalla barra di stato.
Alcune delle caratteristiche:
@InvisibleDev - per farlo funzionare su un Mac provando a usare questo:
{
"version": "0.1.0",
"command": "Chrome",
"osx": {
"command": "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"
},
"args": [
"${file}"
]
}
Se hai Chrome già aperto, avvierà il tuo file html in una nuova scheda.
Se desideri ricaricare dal vivo, puoi utilizzare gulp-webserver, che controllerà le modifiche ai file e ricaricherà la pagina, in questo modo non dovrai premere F5 ogni volta sulla tua pagina:
Ecco come farlo:
Apri il prompt dei comandi (cmd) e digita
npm install --save-dev gulp-webserver
Immettere Ctrl + Maiusc + P in Codice VS e digitare Configura Task Runner . Selezionalo e premi invio. Si aprirà il file Task.json per te. Rimuovi tutto da esso e inserisci il seguente codice
tasks.json
{
"version": "0.1.0",
"command": "gulp",
"isShellCommand": true,
"args": [
"--no-color"
],
"tasks": [
{
"taskName": "webserver",
"isBuildCommand": true,
"showOutput": "always"
}
]
}
gulpfile.js
var gulp = require('gulp'),
webserver = require('gulp-webserver');
gulp.task('webserver', function () {
gulp.src('app')
.pipe(webserver({
livereload: true,
open: true
}));
});
Il tuo server web ora aprirà la tua pagina nel tuo browser predefinito. Ora tutte le modifiche che farai alle tue pagine HTML o CSS verranno ricaricate automaticamente.
Ecco un'informazione su come configurare 'gulp-webserver' per la porta dell'istanza e quale pagina caricare, ...
Puoi anche eseguire l'attività semplicemente digitando Ctrl + P e digitare task webserver
npm install -g gulp
, npm install -g gulp-webserver
e aggiungere una variabile ambiente NODE_PATH che punta a mio AppData \ NPM \ node_modules. Quindi sono stato in grado di eseguire l'attività del server web, tuttavia ottengo un 404 all'avvio del browser. Hai idea di cosa mi manchi?
Ora puoi installare un'estensione Visualizza nel browser . L'ho provato su Windows con Chrome e funziona.
versione vscode: 1.10.2
Ecco una versione 2.0.0 per il documento corrente in Chrome con scorciatoia da tastiera:
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"
}
Per l'esecuzione su un server Web:
https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
In Linux, è possibile utilizzare il xdg-open
comando per aprire il file con il browser predefinito:
{
"version": "0.1.0",
"linux": {
"command": "xdg-open"
},
"isShellCommand": true,
"showOutput": "never",
"args": ["${file}"]
}
Ctrl + Shift + b
per avviarlo nel browser. Per me, il mnemonico era "b = browser". :-)
Passo 1:
Sto solo ripubblicando i passaggi che ho usato dal msdn
blog. Potrebbe aiutare la comunità.
Ciò ti aiuterà a configurare un server Web locale noto come lite-server con VS Code
e ti guiderà anche a ospitare i tuoi html
file statici localhost
e il debug
tuo Javascript
codice.
1. Installa Node.js
Se non è già installato, scaricalo qui
Viene fornito con npm (il gestore pacchetti per l'acquisizione e la gestione delle librerie di sviluppo)
2. Crea una nuova cartella per il tuo progetto
Da qualche parte nel tuo disco, crea una nuova cartella per la tua app web.
3. Aggiungere un file package.json nella cartella del progetto
Quindi copia / incolla il seguente testo:
{
"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. Installa il web server
In una finestra del terminale (prompt dei comandi in Windows) aperta nella cartella del progetto, eseguire questo comando:
npm install
Ciò installerà lite-server (definito in package.json), un server statico che carica index.html nel browser predefinito e lo aggiorna automaticamente quando cambiano i file dell'applicazione.
5. Avviare il server Web locale!
(Supponendo di avere un file index.html nella cartella del progetto).
Nella stessa finestra del terminale (prompt dei comandi in Windows) eseguire questo comando:
npm start
Aspetta un secondo e index.html viene caricato e visualizzato nel tuo browser predefinito servito dal tuo server web locale!
lite-server sta guardando i tuoi file e aggiorna la pagina non appena apporti modifiche a qualsiasi file html, js o css.
E se hai VS Code configurato per il salvataggio automatico (menu File / Auto Save), vedi le modifiche nel browser mentre scrivi!
Appunti:
Questo è tutto. Ora, prima di qualsiasi sessione di programmazione, digita npm start e sei a posto!
Originariamente pubblicato qui nel msdn
blog. I crediti vanno all'autore:@Laurent Duveau
Se sei solo su Mac questo tasks.json
file:
{
"version": "0.1.0",
"command": "open",
"args": ["${file}"],
}
... è tutto ciò che serve per aprire il file corrente in Safari, supponendo che la sua estensione sia ".html".
Crea tasks.json
come descritto sopra e invocalo con ⌘+ shift+ b.
Se vuoi che si apra in Chrome, allora:
{
"version": "0.1.0",
"command": "open",
"args": ["-a", "Chrome.app", "${file}"],
}
Questo farà quello che vuoi, come nell'apertura in una nuova scheda se l'app è già aperta.
Una soluzione con un clic installa semplicemente le estensioni open-in-browser dal marketplace di Visual Studio.
Risposta aggiornata il 18 aprile 2020
Fai clic su questa icona di gestione in basso a sinistra . Fai clic su Estensioni o scorciatoiaCtrl+Shift+X
Quindi cerca in estensione con questa frase chiave Apri nel browser predefinito . Troverai questa estensione. È meglio per me
Ora fai clic destro sul html
file e vedrai Apri nel browser predefinito o Scorciatoia Ctrl+1
per vedere il html
file nel browser.
Per Mac - Apre in Chrome - Testato su VS Code v 1.9.0
Digita Configura Task Runner, la prima volta che lo fai, VS Code ti darà il menu di scorrimento verso il basso, se seleziona "Altro". Se lo hai già fatto, VS Code ti invierà direttamente a task.json.
Una volta nel file task.json. Elimina lo script visualizzato e sostituiscilo con il seguente:
{ "version": "0.1.0", "command": "Chrome", "osx": { "command": "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" }, "args": ["${file}"] }
CTRL+SHIFT+P
mostrerà la tavolozza dei comandi.
A seconda di cosa stai gestendo, ovviamente. Esempio in un'app ASP.net è possibile digitare:
>kestrel
e quindi aprire il browser Web e digitare localhost:(your port here)
.
Se digiti >
, ti mostrerà lo show ed eseguirà i comandi
O nel tuo caso con HTML, penso che F5
dopo aver aperto la tavolozza dei comandi dovrebbe aprire il debugger.
Fonte: link
Aprire i file nel browser Opera (su Windows 64 bit). Aggiungi solo queste righe:
{
"version": "0.1.0",
"command": "opera",
"windows": {
"command": "///Program Files (x86)/Opera/launcher.exe"
},
"args": ["${file}"] }
Prestare attenzione al formato del percorso su "comando": riga. Non utilizzare il formato "C: \ path_to_exe \ runme.exe".
Per eseguire questa attività, apri il file html che desideri visualizzare, premi F1, digita task opera e premi invio
la mia sceneggiatura runner è simile a:
{
"version": "0.1.0",
"command": "explorer",
"windows": {
"command": "explorer.exe"
},
"args": ["{$file}"]
}
ed è appena aperto il mio explorer quando premo ctrl shift b nel mio file index.html
ecco come è possibile eseguirlo in più browser per 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}"]
}
]
}
notate che non ho digitato nulla in args per Edge perché Edge è il mio browser predefinito che gli ha appena dato il nome del file.
EDIT: inoltre non hai bisogno di -incognito né -private-window ... sono solo io che mi piace vederlo in una finestra privata
tasks
parte. l' "args":["/C"]
è ciò che rende questo lavoro. Per curiosità, cosa fa questo?
Recentemente mi sono imbattuto in questa funzione in uno dei tutorial sul codice di Visual Studio in www.lynda.com
Premi Ctrl + K seguito da M, aprirà la "Seleziona modalità lingua" (o fai clic sull'angolo in basso a destra che dice HTML prima di quella faccina), digita markdown e premi Invio
Ora premi Ctrl + K seguito da V, aprirà il tuo html in una scheda vicino.
Tadaaa !!!
Ora i comandi emmet non funzionavano in questa modalità nel mio file html, quindi sono tornato allo stato originale (nota - il tag html tellisense funzionava perfettamente)
Per passare allo stato originale - Premi Ctrl + K seguito da M, seleziona rilevamento automatico. i comandi emmet hanno iniziato a funzionare. Se sei soddisfatto del solo visualizzatore HTML, non è necessario che torni allo stato originale.
Mi chiedo perché vscode non abbia l'opzione di visualizzazione html per impostazione predefinita, quando è in grado di distribuire il file html in modalità markdown.
Comunque è bello. Buona vscoding :)
Ecco la versione 2.0.0 per 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 aprirà il browser predefinito. in alternativa puoi premere Ctrl + Maiusc + P per aprire la finestra di comando e selezionare "Visualizza nel browser". Il codice html deve essere salvato in un file (codice non salvato nell'editor - senza estensione, non funziona)
probabilmente la maggior parte sarà in grado di trovare una soluzione dalle risposte di cui sopra, ma visto che nessuno ha funzionato per me ( vscode v1.34
) ho pensato di condividere la mia esperienza. se almeno una persona lo trova utile allora, non un posto sprecato, amiirte ?
comunque, la mia soluzione ( windows
) è costruita in cima a @ noontz's. la sua configurazione potrebbe essere stata sufficiente per le versioni precedenti di vscode
ma non con1.34
(almeno, non riuscivo a farlo funzionare ..).
le nostre configurazioni sono quasi identiche, salvo una singola proprietà: tale proprietà è lagroup
proprietà. non sono sicuro del perché, ma senza questo, il mio compito non apparirebbe nemmeno nella tavolozza dei comandi.
così. un lavoro tasks.json
per gli windows
utenti che eseguono 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": []
}
]
}
tieni presente che la problemMatcher
proprietà non è necessaria per il suo funzionamento, ma senza di essa ti viene imposto un passaggio manuale aggiuntivo. ho provato a leggere i documenti su questa proprietà ma sono troppo spessa per capire. spero che qualcuno verrà e mi istruisca, ma sì, grazie in anticipo per quello. tutto quello che so è: includi questa proprietà e ctrl+shift+b
apre il html
file corrente in una nuova chrome
scheda, senza problemi.
facile.
{
"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"
}
]
}
{
"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
proprietà con un altro sistema operativo${config:chrome.executable}
con la tua posizione cromata personalizzata, ad es"C:/Program Files (x86)/Google/Chrome/Application/chrome.exe"
${config:chrome.profileDir}
con la propria directory del profilo Chrome personalizzata, ad es
"C:/My/Data/chrome/profile"
o lasciala fuorisettings.json
- utente o spazio di lavoro -, regola i percorsi in base alle tue esigenze:"chrome.executable": "C:/Program Files (x86)/Google/Chrome/Application/chrome.exe",
"chrome.profileDir": "C:/My/Data/chrome/profile"
launch.json
Per scopi di debug:"runtimeExecutable": "${config:chrome.executable}"