visual-studio-code - tutorial - visual studio code plugins

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

Question

¿Cómo 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?

Answer 1

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

Answer 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

Answer 3

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

Answer 4

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

Answer 5

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

Answer 6

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)

Answer 7

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

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

Answer 8

La solución de un clic simplemente instala open-in-browser extensiones open-in-browser del mercado de Visual Studio.

Answer 9

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 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 $ sale 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 + b para ver su página en su navegador web.

Answer 10

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 "Seleccionar modo de 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 emmet comenzaron a funcionar. Si está satisfecho con el visor solo html, 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 :)

Answer 11

Si desea volver a cargar 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

Answer 12

Si solo está en Mac, este archivo tasks.json :

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

Cree tasks.json como se describió anteriormente e invoque 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.

Answer 13

Solo estoy volviendo a publicar los pasos que utilicé en el blog msdn . 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 archivos html estáticos en localhost y debug su código Javascript .

1. Instalar Node.js

Si aún no está instalado, consíguelo here

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 la carpeta de su 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 tenga 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 here en el blog msdn . Los créditos van al autor: @Laurent Duveau

Answer 14

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

Answer 15

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

Answer 16

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

Answer 17

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 a una persona le resulta útil, entonces, no es una publicación desperdiciada, ¿ amiirte ?

de todos modos, mi solución ( windows ) está construida en la parte superior de @ noontz''s. su configuración puede haber sido suficiente para versiones anteriores de vscode 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 propiedad del group . No estoy seguro de por qué, pero sin esto, mi tarea ni siquiera aparecería en la paleta de comandos.

asi que. un trabajo tasks.json para usuarios de windows 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 la propiedad problemMatcher no es necesaria 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 archivo html actual en una nueva pestaña de chrome , sin problemas.

fácil.

Answer 18

CTRL+SHIFT+P mostrará 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 su caso con HTML, creo que F5 después de abrir la paleta de comandos debería abrir el depurador.

Fuente: link

Answer 19

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

1. Use Comando + Mayús + p para 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 ya 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 Comando + Mayús + b para ver su página en Chrome.