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

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.

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

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

• 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

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-opencomando para abrir el archivo con el navegador predeterminado:

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

Paso 1:

1. Abra Visual Studio Code, luego vaya a extensiones.

2. Busque "abrir en el navegador".

   3.Instalarlo.

   4. Haga clic derecho en su archivo html, encontrará la opción "Abrir en el navegador".

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

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

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.

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

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

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

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

3. 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}"]
}

4. Vuelva a su archivo html y presione Command+ Shift+b para ver su página en Chrome.

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

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

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

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