¿Cómo puedo ver mi código HTML en un navegador con el nuevo código de Microsoft Visual Studio?
Con Notepad ++ tienes la opción de Ejecutar en un navegador. ¿Cómo puedo hacer lo mismo con Visual Studio Code?
¿Cómo puedo ver mi código HTML en un navegador con el nuevo código de Microsoft Visual Studio?
Con Notepad ++ tienes la opción de Ejecutar en un navegador. ¿Cómo puedo hacer lo mismo con Visual Studio Code?
Respuestas:
Para Windows - Abra su navegador predeterminado - Probado en VS Code v 1.1.0
Responda tanto a la apertura de un archivo específico (el nombre está codificado) O a la apertura de CUALQUIER otro archivo.
Pasos:
Use ctrl+ shift+ p(o F1) para abrir la Paleta de comandos.
Escriba en Tasks: Configure Task
o en versiones anteriores Configure Task Runner
. Al seleccionarlo, se abrirá el archivo task.json . Elimine el script que se muestra y reemplácelo por lo siguiente:
{
"version": "0.1.0",
"command": "explorer",
"windows": {
"command": "explorer.exe"
},
"args": ["test.html"]
}
Recuerde cambiar la sección "args" del archivo task.json por el nombre de su archivo. Esto siempre abrirá ese archivo específico cuando presione F5.
También puede configurar esto para que abra el archivo que haya abierto en ese momento utilizando ["${file}"]
como valor para "args". Tenga en cuenta que $
va fuera de {...}
, por lo que ["{$file}"]
es incorrecto.
Guarda el archivo.
Vuelva a su archivo html (en este ejemplo es "text.html") y presione ctrl+ shift+ bpara ver su página en su navegador web.
VS Code tiene una extensión de servidor en vivo que admite el inicio de un clic desde la barra de estado.
Algunas de las características:
@InvisibleDev: para que esto funcione en una Mac que intente usar esto:
{
"version": "0.1.0",
"command": "Chrome",
"osx": {
"command": "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"
},
"args": [
"${file}"
]
}
Si ya tiene Chrome abierto, iniciará su archivo html en una nueva pestaña.
Si desea tener una recarga en vivo, puede usar gulp-webserver, que vigilará los cambios de archivos y la página de recarga, de esta manera no tendrá que presionar F5 cada vez en su página:
Aquí está cómo hacerlo:
Abra el símbolo del sistema (cmd) y escriba
npm install --save-dev gulp-webserver
Ingrese Ctrl + Shift + P en VS Code y escriba Configure Task Runner . Selecciónelo y presione enter. Se abrirá el archivo task.json para usted. Elimine todo de él y escriba el siguiente código
task.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
}));
});
Su servidor web ahora abrirá su página en su navegador predeterminado. Ahora, cualquier cambio que realice en sus páginas HTML o CSS se volverá a cargar automáticamente.
Aquí hay información sobre cómo configurar 'gulp-webserver' para el puerto de instancia, y qué página cargar, ...
También puede ejecutar su tarea simplemente ingresando Ctrl + P y escribiendo el servidor web de tareas
npm install -g gulp
, npm install -g gulp-webserver
y añadir una variable de entorno NODE_PATH que apunta a mi AppData \ NPM \ node_modules. Luego pude ejecutar la tarea del servidor web, sin embargo, obtengo un 404 cuando se inicia el navegador. ¿Alguna idea de lo que me estoy perdiendo?
Ahora puede instalar una extensión Ver en el navegador . Lo probé en Windows con Chrome y está funcionando.
Versión de vscode: 1.10.2
Aquí hay una versión 2.0.0 para el documento actual en Chrome con acceso directo de teclado:
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"
}
Para ejecutar en un servidor web:
https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
En Linux, puede usar el xdg-open
comando para abrir el archivo con el navegador predeterminado:
{
"version": "0.1.0",
"linux": {
"command": "xdg-open"
},
"isShellCommand": true,
"showOutput": "never",
"args": ["${file}"]
}
Ctrl + Shift + b
para iniciarlo en el navegador. Para mí, el mnemónico era "b = navegador". :-)
Paso 1:
Solo estoy volviendo a publicar los pasos que utilicé en el msdn
blog. Puede ayudar a la comunidad.
Esto lo ayudará a configurar un servidor web local conocido como lite-server con VS Code
, y también lo guiará para alojar sus html
archivos estáticos localhost
y debug
su Javascript
código.
1. Instalar Node.js
Si aún no está instalado, consíguelo aquí
Viene con npm (el administrador de paquetes para adquirir y administrar sus bibliotecas de desarrollo)
2. Cree una nueva carpeta para su proyecto
En algún lugar de su disco, cree una nueva carpeta para su aplicación web.
3. Agregue un archivo package.json a la carpeta del proyecto
Luego copie / pegue el siguiente texto:
{
"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. Instale el servidor web
En una ventana de terminal (símbolo del sistema en Windows) abierta en su carpeta de proyecto, ejecute este comando:
npm install
Esto instalará lite-server (definido en package.json), un servidor estático que carga index.html en su navegador predeterminado y lo actualiza automáticamente cuando cambian los archivos de la aplicación.
5. ¡Inicie el servidor web local!
(Suponiendo que tiene un archivo index.html en su carpeta de proyecto).
En la misma ventana de terminal (símbolo del sistema en Windows) ejecute este comando:
npm start
¡Espere un segundo e index.html se carga y se muestra en su navegador predeterminado atendido por su servidor web local!
lite-server está mirando sus archivos y actualiza la página tan pronto como realiza cambios en los archivos html, js o css.
Y si tiene el Código VS configurado para guardar automáticamente (menú Archivo / Guardar automáticamente), verá cambios en el navegador a medida que escribe.
Notas:
Eso es. Ahora, antes de cualquier sesión de codificación, simplemente escriba npm start y ¡ya está listo!
Publicado originalmente aquí en el msdn
blog. Los créditos van al autor:@Laurent Duveau
Si solo estás en Mac este tasks.json
archivo:
{
"version": "0.1.0",
"command": "open",
"args": ["${file}"],
}
... es todo lo que necesita para abrir el archivo actual en Safari, suponiendo que su extensión sea ".html".
Crea tasks.json
como se describe arriba e invoca con ⌘+ shift+ b.
Si quieres que se abra en Chrome, entonces:
{
"version": "0.1.0",
"command": "open",
"args": ["-a", "Chrome.app", "${file}"],
}
Esto hará lo que quieras, como abrir una nueva pestaña si la aplicación ya está abierta.
La solución de un clic simplemente instala las extensiones abiertas en el navegador del mercado de Visual Studio.
Respuesta actualizada en 18 de abril de 2020
Haga clic en este ícono de administración inferior izquierdo . Extensiones de clic o atajoCtrl+Shift+X
Luego busque en extensión con esta oración clave Abrir en el navegador predeterminado . Encontrarás esta extensión. Es mejor para mi
Ahora haga clic derecho en el html
archivo y verá Abrir en el navegador predeterminado o Atajo Ctrl+1
para ver el html
archivo en el navegador.
Para Mac - Se abre en Chrome - Probado en VS Code v 1.9.0
Escriba Configurar Task Runner, la primera vez que haga esto, VS Code le mostrará el menú desplegable, si selecciona "Otro". Si ha hecho esto antes, VS Code lo enviará directamente a task.json.
Una vez en el archivo task.json. Elimine el script que se muestra y reemplácelo por lo siguiente:
{ "version": "0.1.0", "command": "Chrome", "osx": { "command": "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" }, "args": ["${file}"] }
CTRL+SHIFT+P
Aparecerá la paleta de comandos.
Dependiendo de lo que estés ejecutando, por supuesto. Ejemplo en una aplicación ASP.net que puede escribir:
>kestrel
y luego abra su navegador web y escriba localhost:(your port here)
.
Si escribe >
, le mostrará los comandos show y run
O en tu caso con HTML, creo F5
después de abrir la paleta de comandos debería abrir el depurador.
Fuente: enlace
Abrir archivos en el navegador Opera (en Windows 64 bits). Solo agregue estas líneas:
{
"version": "0.1.0",
"command": "opera",
"windows": {
"command": "///Program Files (x86)/Opera/launcher.exe"
},
"args": ["${file}"] }
Presta atención al formato de ruta en "comando": línea. No utilice el formato "C: \ path_to_exe \ runme.exe".
Para ejecutar esta tarea, abra el archivo html que desea ver, presione F1, escriba task opera y presione enter
mi script de corredor se ve así:
{
"version": "0.1.0",
"command": "explorer",
"windows": {
"command": "explorer.exe"
},
"args": ["{$file}"]
}
y es solo abrir mi explorador cuando presiono ctrl shift b en mi archivo index.html
así es como puede ejecutarlo en múltiples navegadores para 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}"]
}
]
}
tenga en cuenta que no escribí nada en args para edge porque Edge es mi navegador predeterminado, solo le dio el nombre del archivo.
EDITAR: tampoco necesita -incognito ni -private-window ... soy solo yo, me gusta verlo en una ventana privada
tasks
parte. el "args":["/C"]
es lo que hace este trabajo. Por curiosidad, ¿qué hace esto?
Recientemente encontré esta característica en uno de los tutoriales de código de Visual Studio en www.lynda.com
Presione Ctrl + K seguido de M, se abrirá el "Modo Seleccionar idioma" (o haga clic en la esquina inferior derecha que dice HTML antes de esa carita), escriba markdown y presione enter
Ahora presione Ctrl + K seguido de V, se abrirá su html en una pestaña cercana.
Tadaaa !!!
Ahora los comandos emmet no funcionaban en este modo en mi archivo html, así que volví al estado original (nota: la etiqueta html tellisense funcionaba perfectamente)
Para ir al estado original: presione Ctrl + K seguido de M, seleccione detección automática. Los comandos de emmet comenzaron a funcionar. Si está satisfecho con el visor solo html, entonces no es necesario que vuelva al estado original.
Me pregunto por qué vscode no tiene la opción de visor html de forma predeterminada, cuando es capaz de mostrar el archivo html en el modo de reducción.
De todos modos es genial. Feliz vscoding :)
Aquí está la versión 2.0.0 para 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 abrirá el navegador predeterminado. alternativamente, puede presionar Ctrl + shift + P para abrir la ventana de comandos y seleccionar "Ver en el navegador". El código html debe guardarse en un archivo (código no guardado en el editor, sin extensión, no funciona)
probablemente la mayoría podrá encontrar una solución a partir de las respuestas anteriores, pero viendo que ninguna funcionó para mí ( vscode v1.34
) pensé que compartiría mi experiencia. si al menos una persona lo encuentra útil, no enfriar una publicación desperdiciada, amiirte ?
de todos modos, mi solución ( windows
) está construida encima de @ noontz's. su configuración puede haber sido suficiente para versiones anteriores devscode
pero no con 1.34
(al menos, no pude hacerlo funcionar ...).
nuestras configuraciones son casi idénticas salvo una sola propiedad, siendo esa propiedad, la group
propiedad. No estoy seguro de por qué, pero sin esto, mi tarea ni siquiera aparecería en la paleta de comandos.
entonces. un trabajo tasks.json
para windows
usuarios que ejecutan 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": []
}
]
}
tenga en cuenta que problemMatcher
no se requiere la propiedad para que esto funcione, pero sin ella se le impone un paso manual adicional. Traté de leer los documentos de esta propiedad, pero soy demasiado grueso para entender. espero que alguien venga y me enseñe, pero sí, gracias de antemano por eso. Todo lo que sé es que incluye esta propiedad y ctrl+shift+b
abre el html
archivo actual en una nueva chrome
pestaña, sin problemas.
fácil.
{
"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
propiedad por otro sistema operativo${config:chrome.executable}
con su ubicación de cromo personalizada, por ejemplo"C:/Program Files (x86)/Google/Chrome/Application/chrome.exe"
${config:chrome.profileDir}
con su directorio de perfil de Chrome personalizado, por ejemplo
"C:/My/Data/chrome/profile"
o déjelo fuerasettings.json
- usuario o espacio de trabajo -, ajuste las rutas a sus necesidades:"chrome.executable": "C:/Program Files (x86)/Google/Chrome/Application/chrome.exe",
"chrome.profileDir": "C:/My/Data/chrome/profile"
launch.json
para fines de depuración:"runtimeExecutable": "${config:chrome.executable}"