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

¿Cómo puedo ver mi código HTML en un navegador con el nuevo Microsoft Visual Studio Code?

Con Notepad++ tienes la opción de Ejecutar en un navegador. ¿Cómo puedo hacer lo mismo con Visual Studio Code?

May 05 '15 03:05

Para Windows: abra su navegador predeterminado: probado en VS Code v 1.1.0

Responda tanto para abrir un archivo específico (el nombre está codificado) O para abrir CUALQUIER otro archivo.

Pasos:

Utilice ctrl+ shift+ p(o F1) para abrir la paleta de comandos.
Escriba 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 presiones F5.

También puede configurar esto para que abra cualquier archivo que tenga abierto en ese momento utilizando ["${file}"]como valor "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.

ingrese la descripción de la imagen aquí

May 05 '2015 02:05 yushulx

VS Code tiene una extensión Live Server que admite el inicio con un clic desde la barra de estado.

Algunas de las características:

Lanzamiento con un clic desde la barra de estado
recarga en vivo
Soporte para el archivo adjunto de depuración de Chrome

ingrese la descripción de la imagen aquí

Feb 10 '2018 14:02 Jose Cherian

@InvisibleDev: para que esto funcione en una Mac, 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.

Jul 11 '2015 12:07 Sammydo_55

Abrir barra lateral de extensiones ( Ctrl+ Shift+ X)
Busque abrir en el navegador e instálelo
Haga clic derecho en su archivo html y seleccione "Abrir en el navegador" ( Alt+ B)

Aug 31 '2019 18:08 Rinku Choudhary

Si desea realizar una recarga en vivo, puede usar gulp-webserver, que observará los cambios en sus archivos y recargará la página, de esta manera no tendrá que presionar F5 cada vez que acceda a su página:

Aquí se explica cómo hacerlo:

Abra el símbolo del sistema (cmd) y escriba

instalación npm --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. Elimina todo lo que hay al final, ingresa el siguiente código

tareas.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 lo ingrese, verá su tarea "servidor web" seleccionada y presione Entrar.

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 recargará automáticamente.

Aquí hay información sobre cómo configurar 'gulp-webserver', por ejemplo, el puerto, y qué página cargar,...

También puede ejecutar su tarea simplemente ingresando Ctrl+P y escribiendo tarea servidor web

Jan 14 '2016 22:01 Vlad Bezden