Cómo ver un archivo HTML en el navegador con Visual Studio Code

266

¿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?

Ninjakannon
fuente
77
VS Code tiene una extensión de servidor en vivo ahora. Por favor vea mi respuesta: stackoverflow.com/a/48721885/466066
Jose Cherian
3
La extensión del servidor en vivo funcionó para mí. No quiero configurar ningún archivo para hacer esto.
AGDM
también relacionado: stackoverflow.com/questions/47519768/…
ford04

Respuestas:

209

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:

  1. Use ctrl+ shift+ p(o F1) para abrir la Paleta de comandos.

  2. Escriba en Tasks: Configure Tasko 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.

  3. Guarda el archivo.

  4. Vuelva a su archivo html (en este ejemplo es "text.html") y presione ctrl+ shift+ bpara ver su página en su navegador web.

ingrese la descripción de la imagen aquí

yushulx
fuente
16
Incluso puede usar variables si tiene más de un archivo HTML. Puede hacer: "args": ["{$ file}"] para pasar el archivo abierto actual. Véase también code.visualstudio.com/Docs/tasks#_variables-in-tasksjson
Dirk Bäumer
77
¿Cómo lo hago en Mac? No hay archivos exe. Me gustaría abrir la página web en Chrome en Mac
InvisibleDev
3
simplemente "No se pudo iniciar el programa externo chrome {$ file}. spawn chrome ENOENT"
johny por qué el
77
Para configurar la tarea en una nueva carpeta: Seleccione el comando Tareas: Configurar el corredor de tareas y verá una lista de plantillas de corredores de tareas. Seleccione Otros para crear una tarea que ejecute un comando externo. . . . Ahora debería ver un archivo task.json en la carpeta .vscode de su espacio de trabajo con el siguiente contenido:. . . por code.visualstudio.com/Docs/editor/tasks
yu yang Jian
55
Configure Task Runner ya no está presente en VSC 1.24.0 - Control-Shift-P no devuelve resultados para esa cadena.
lonstar
110

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:

  • Inicio con un clic desde la barra de estado
  • Recarga en vivo
  • Soporte para archivos adjuntos de depuración de Chrome

ingrese la descripción de la imagen aquí

Jose Cherian
fuente
8
Esta extensión también tiene un complemento web para proporcionar funcionalidad de recarga automática a páginas dinámicas.
M. Sundstrom
@ M.Sundstrom, ¿puede darme el nombre / enlace de ese complemento, por favor?
Adil Saju
2
Sigue siendo muy útil, y especialmente completamente libre de configuración.
Jonas
2
Esto no se recomienda para páginas complejas, tal vez sea bueno para los nuevos codificadores
Yasser Jarouf
1
pero parece que no puede obtener una vista previa del archivo activo no guardado, ¿verdad? (Ejecutarlo, no muestra una vista previa del html, pero muestra en el navegador la jerarquía de carpetas)
JinSnow
73

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

Sammydo_55
fuente
32

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"
        }
    ]
}
  • En el directorio raíz de su proyecto, agregue gulpfile.js e ingrese el siguiente código:

gulpfile.js

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

gulp.task('webserver', function () {
    gulp.src('app')
        .pipe(webserver({
            livereload: true,
            open: true
        }));
});
  • Ahora en VS Code ingrese Ctrl + Shift + P y escriba "Ejecutar tarea" cuando ingrese verá su tarea "servidor web" seleccionada y presione enter.

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

Vlad Bezden
fuente
2
Tuve que correr npm install -g gulp, npm install -g gulp-webservery 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?
Kirill Osenkov el
2
No importa, solo tuve que cambiar la 'aplicación' en su ejemplo a '.' (por lo que sirve desde el directorio actual).
Kirill Osenkov el
1
Un comentario a la respuesta: si desea ejecutar un archivo html en su navegador, que se recargará automáticamente en los cambios, su gulpfile.js debería verse así, con un '.' en lugar de la 'aplicación'. Código = var gulp = require ('gulp'), servidor web = require ('gulp-webserver'); gulp.task ('servidor web', función () {gulp.src ('.') .pipe (servidor web ({fallback: 'index.html', livereload: true, open: true}));});
Friis1978
1
Esto es asombroso Gracias por explicar esto como una opción valiosa. También tuve que aplicar un poco de las respuestas de Krill y Friis para que esto funcionara. Pero lo hace!
klewis
Estaba obteniendo "No se puede OBTENER /" porque copié gulpfile.js sin configurar la línea gulp.src('app')para que realmente señalara mi fuente (que no era /appsino '.'). Funciona perfecto ¡Gracias!
22

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

ingrese la descripción de la imagen aquí

Roel
fuente
55
Esa extensión recibe críticas horribles.
Jon Crowell
Esto no actualiza automáticamente el navegador y esto no es lo que está buscando OP
Jude Niroshan
18

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

noontz
fuente
17

En Linux, puede usar el xdg-opencomando para abrir el archivo con el navegador predeterminado:

{
    "version": "0.1.0",
    "linux": {
        "command": "xdg-open"
    },
    "isShellCommand": true,
    "showOutput": "never",
    "args": ["${file}"]
}
Loris
fuente
66
¡Gracias! Soy un usuario de Linux y me sentía perdido. Me gustaría agregar que hay que presionar Ctrl + Shift + bpara iniciarlo en el navegador. Para mí, el mnemónico era "b = navegador". :-)
ankush981
Funciona, pero parece obsoleto, si tiene una versión actualizada, gracias
Bruno L.
14

Paso 1:

  1. Abra Visual Studio Code, luego vaya a extensiones.
  2. Busque "abrir en el navegador". ingrese la descripción de la imagen aquí

    3.Instalarlo.

    4. Haga clic derecho en su archivo html, encontrará la opción "Abrir en el navegador". ingrese la descripción de la imagen aquí

    Eso es todo................................................ ......

rinku Choudhary
fuente
9

Solo estoy volviendo a publicar los pasos que utilicé en el msdnblog. 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 htmlarchivos estáticos localhosty debugsu Javascriptcó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:

  • No cierre la línea de comandos hasta que haya terminado de codificar en su aplicación para el día
  • Se abre en http: // localhost: 10001 pero puede cambiar el puerto editando el archivo package.json.

Eso es. Ahora, antes de cualquier sesión de codificación, simplemente escriba npm start y ¡ya está listo!

Publicado originalmente aquí en el msdnblog. Los créditos van al autor:@Laurent Duveau

shaijut
fuente
6

Si solo estás en Mac este tasks.jsonarchivo:

{
    "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.jsoncomo 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.

Sez
fuente
4

Respuesta actualizada en 18 de abril de 2020

ingrese la descripción de la imagen aquí

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 htmlarchivo y verá Abrir en el navegador predeterminado o Atajo Ctrl+1para ver el htmlarchivo en el navegador.

Señor perfeccionista
fuente
3

Para Mac - Se abre en Chrome - Probado en VS Code v 1.9.0

  1. Use Command+ shift+ ppara abrir la paleta de comandos.

ingrese la descripción de la imagen aquí

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

  2. 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}"]
}
  1. Vuelva a su archivo html y presione Command+ Shift+b para ver su página en Chrome.
Joe Mellin
fuente
2

CTRL+SHIFT+PAparecerá la paleta de comandos.
Dependiendo de lo que estés ejecutando, por supuesto. Ejemplo en una aplicación ASP.net que puede escribir:
>kestrely 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

Andreas DM
fuente
2

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

Jose carlos
fuente
2

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

Sahar Ben-Shushan
fuente
2

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

Abdel-Rahman Muhammed
fuente
Estaba copiando solo la tasksparte. el "args":["/C"]es lo que hace este trabajo. Por curiosidad, ¿qué hace esto?
Ryan B
1

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

Mrk
fuente
1
La pregunta es sobre cómo ver en un navegador.
user5389726598465
1

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}"
      ]
    }
  ]
}
Eliandro
fuente
0

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)

PersyJack
fuente
1
¿Qué versión de Visual Studio Code estás usando? Esos comandos no funcionan en mi 1.8.1 recién actualizado. Ctrl + F1 no hace nada y no tengo una opción Ver en el navegador en la paleta de comandos. ¿Quizás tenga algo más allá de las tareas predeterminadas instaladas o adicionales en sus task.json?
jla
Tengo la misma versión pero me di cuenta de que instalé una extensión para ello. Es: marketplace.visualstudio.com/…
PersyJack
0

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 grouppropiedad. No estoy seguro de por qué, pero sin esto, mi tarea ni siquiera aparecería en la paleta de comandos.

entonces. un trabajo tasks.jsonpara windowsusuarios 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 problemMatcherno 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+babre el htmlarchivo actual en una nueva chromepestaña, sin problemas.


fácil.

mad.meesh
fuente
0

Abra Chrome personalizado con URL desde el indicador

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

Abrir Chrome personalizado con archivo activo

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

Notas

  • si es necesario, reemplace la windowspropiedad por otro sistema operativo
  • reemplace ${config:chrome.executable}con su ubicación de cromo personalizada, por ejemplo"C:/Program Files (x86)/Google/Chrome/Application/chrome.exe"
  • reemplace ${config:chrome.profileDir}con su directorio de perfil de Chrome personalizado, por ejemplo "C:/My/Data/chrome/profile" o déjelo fuera
  • Puede mantener las variables como arriba si lo desea. Para hacerlo, agregue las siguientes entradas en settings.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"
  • Puede reutilizar estas variables, por ejemplo, launch.jsonpara fines de depuración:"runtimeExecutable": "${config:chrome.executable}"
ford04
fuente