Cómo abrir en el navegador desde VS Code

Si usa archivos HTML, PHP o JS, es posible que desee abrirlos en su navegador desde Visual Studio Code. Sin embargo, no hay una opción integrada para hacerlo. Esto puede ser frustrante, especialmente si desea echar un vistazo rápido al resultado de su codificación.

Cómo abrir en el navegador desde VS Code

Afortunadamente, puede habilitar la función "Abrir en el navegador" a través de otros métodos. Este artículo le mostrará cómo hacer precisamente eso.

Cómo abrir en el navegador en VS Code en una PC con Windows

La forma más fácil de obtener la opción Abrir en el navegador para Visual Studio Code en Windows es usar una extensión. La instalación de extensiones en Visual Studio Code es relativamente sencilla, al igual que su uso para abrir archivos en el navegador.

  1. Abra su archivo HTML en Visual Studio Code Editor .
    Cómo abrir en el navegador desde VS Code
  2. En la barra de herramientas vertical del extremo izquierdo, haga clic en "Extensiones". Alternativamente, puede usar el atajo de teclado "Ctrl + Shift + X" para iniciar Extensiones.
    Cómo abrir en el navegador desde VS Code
  3. Haga clic en la barra de búsqueda para habilitar la escritura.
    Cómo abrir en el navegador desde VS Code
  4. Ingrese "abrir en el navegador". Elija una extensión que coincida con su término de búsqueda.
    Cómo abrir en el navegador desde VS Code
  5. Haga clic en el botón "Instalar".
    Cómo abrir en el navegador desde VS Code
  6. Vuelva a cargar el programa.
  7. Seleccione el Explorador de la barra de herramientas de la izquierda.
    Cómo abrir en el navegador desde VS Code
  8. Busque su archivo HTML en el Explorador y haga clic derecho sobre él. Elija "Abrir en el navegador predeterminado" o "Abrir en otros navegadores".
    Cómo abrir en el navegador desde VS Code
  9. Si selecciona la opción "Abrir en el navegador predeterminado", el archivo HTML se iniciará en cualquier navegador que esté configurado como predeterminado. Si elige "Abrir en otros navegadores", deberá especificar qué navegador se utilizará.

Puede encontrar muchas extensiones útiles en Visual Studio Marketplace . O puede obtener las extensiones Abrir en el navegador con las reseñas de usuarios más positivas aquí: Extensión 1 , Extensión 2 , Extensión 3 , Extensión 4 .

Cómo abrir en el navegador en VS Code en una Mac

Visual Studio Code se puede actualizar usando varias extensiones que aumentan la funcionalidad del programa. Un tipo de extensión puede habilitar la apertura de archivos HTML, PHP o JS en un navegador predeterminado u otro. Aquí se explica cómo habilitar esa opción en una Mac.

  1. Con Visual Studio Code Editor , abra el archivo deseado.
    Cómo abrir en el navegador desde VS Code
  2. Ve a la barra de herramientas de la izquierda y selecciona "Extensiones".
    Cómo abrir en el navegador desde VS Code
  3. Haga clic en la barra de búsqueda en el panel Extensiones y escriba "abrir en el navegador".
    Cómo abrir en el navegador desde VS Code
  4. Elija una extensión y haga clic en "Instalar".
    Cómo abrir en el navegador desde VS Code
  5. Vuelva a cargar el software.
  6. Vaya a la barra de herramientas de la izquierda y seleccione Explorador.
    Cómo abrir en el navegador desde VS Code
  7. Localice el archivo que desea abrir en el panel Explorador y haga clic con el botón derecho en él. Seleccione "Abrir en el navegador predeterminado" o "Abrir en otros navegadores".
    Cómo abrir en el navegador desde VS Code
  8. La opción "Abrir en el navegador predeterminado" iniciará el archivo usando el navegador preseleccionado. "Abrir en otros navegadores" mostrará un mensaje donde podrá elegir uno de los navegadores instalados en su máquina.
    Cómo abrir en el navegador desde VS Code

Visual Studio Marketplace tiene una amplia selección de extensiones que pueden agregar nuevas funciones a Visual Studio Code. Vale la pena explorar el sitio web si desea modificar aún más el programa. Y si está interesado exclusivamente en las extensiones Abrir en el navegador, aquí tiene algunas sugerencias: Extensión 1 , Extensión 2 , Extensión 3 , Extensión 4 .

Abrir en acceso directo del navegador

Casi todas las extensiones Abrir en el navegador para Visual Studio Code vienen con métodos abreviados de teclado habilitados. Sin embargo, los atajos no son uniformes. En cambio, cada extensión tiene una combinación particular de teclas que activará la apertura del archivo en su navegador.

Estos son los métodos abreviados de teclado para las extensiones sugeridas en este artículo.

  1. Extensión 1: “Ctrl + 1” en Windows, “Comando + 1” en Mac.
    Cómo abrir en el navegador desde VS Code
    Cómo abrir en el navegador desde VS Code
  2. Extensión 2: “Ctrl + Alt + O” en Windows, “Comando + Opción (Alt) + O” en Mac.Cómo abrir en el navegador desde VS Code
    Cómo abrir en el navegador desde VS Code
  3. Extensión 3: “Ctrl + Shift + F9” en Windows, “Command + Shift + F9” en Mac.
    Cómo abrir en el navegador desde VS Code
    Cómo abrir en el navegador desde VS Code
  4. Extensión 4: “Ctrl + Shift + P” en Windows, “Command + Shift + P” en Mac.
    Cómo abrir en el navegador desde VS Code
    Cómo abrir en el navegador desde VS Code

Tenga en cuenta que estos accesos directos solo funcionarán en sus respectivas extensiones vinculadas en este artículo. Si elige instalar una extensión diferente, los accesos directos relevantes probablemente se enumerarán en su página de Marketplace.

Ejecutar HTML en Visual Studio Code

Si está interesado en trabajar con HTML en Visual Studio Code, estos son algunos métodos para ejecutar código HTML dentro del programa.

El primer método consiste en cargar manualmente el archivo que desea ejecutar.

  1. Abra Visual Studio Code y cree un nuevo archivo HTML.
    Cómo abrir en el navegador desde VS Code
  2. Vaya a "Archivo", luego haga clic en "Guardar".
    Cómo abrir en el navegador desde VS Code
  3. Utilizando HTML:5, active la plantilla para HTML. Luego, abra el archivo que guardó en el paso 2.
    Cómo abrir en el navegador desde VS Code
  4. Use la extensión Abrir en el navegador que instaló anteriormente para iniciar el archivo en su navegador.
  5. Dejando el navegador abierto, regrese a Visual Studio Code y edite el archivo HTML, guardando sus cambios.
    Cómo abrir en el navegador desde VS Code
  6. Regrese al navegador y haga clic en Actualizar. Debería ver el cambio de página en función de su edición.
    Cómo abrir en el navegador desde VS Code
  7. Repita los pasos 5 y 6 para verificar su progreso mientras continúa editando el archivo HTML.

El método manual puede ayudar a realizar un seguimiento de su trabajo. Sin embargo, hay una solución aún mejor: la carga automática. Esta opción requerirá que instales otra extensión, pero debería valer la pena.

  1. En Visual Studio Code, vaya a Extensiones, ubicado en la parte inferior de la barra de herramientas izquierda.
    Cómo abrir en el navegador desde VS Code
  2. En la barra de búsqueda de Extensiones, escriba "servidor en vivo".
    Cómo abrir en el navegador desde VS Code
  3. Haga clic en el botón "Instalar" junto a la extensión Live Server.
    Cómo abrir en el navegador desde VS Code
  4. Cree y guarde un nuevo archivo HTML.
    Cómo abrir en el navegador desde VS Code
    Cómo abrir en el navegador desde VS Code
  5. En Visual Studio Code Explorer, haga clic derecho en su nuevo archivo. Seleccione "Abrir servidor en vivo".
    Cómo abrir en el navegador desde VS Code
  6. El archivo HTML se abrirá en el navegador. Una vez que lo haga, intente editar el código HTML. Guarda tu progreso.
    Cómo abrir en el navegador desde VS Code
    Cómo abrir en el navegador desde VS Code
  7. Tan pronto como cree un cambio en el código y lo guarde, su navegador debería actualizarse y mostrar el nuevo contenido. No necesitará actualizar la página manualmente y, en su lugar, podrá tener una confirmación visual de los cambios en tiempo real.
    Cómo abrir en el navegador desde VS Code

Otras extensiones HTML útiles de Visual Studio Code

Como se mencionó, Visual Studio Marketplace está lleno de excelentes herramientas, muchas de las cuales están orientadas a HTML. Aquí están las diez extensiones para HTML más útiles y mejor calificadas.

  • lit-plugin : una herramienta que resalta la sintaxis, verifica la escritura y lo ayuda a completar el código sin errores. Esta extensión tiene reglas personalizables.
  • SCSS Everywhere : una extensión de autocompletado para definiciones de clase para HTML, SCSS, Elixir, SASS, PHP, CSS y muchos otros tipos de archivos.
  • Fragmentos angulares : agrega fragmentos angulares para facilitar su uso en HTML y TypeScript. La extensión funciona desplegando un fragmento una vez que se ha escrito parcialmente.
  • ES6 String HTML : Habilita la compatibilidad con el código de cadena es6 para resaltar la sintaxis. Funciona con HTML, CSS, XML, GLSL y otros formatos.
  • Atributos HTML divididos : esta extensión dividirá los atributos HTML, así como los accesorios y directivas de Angular, Vue y React. Puede usarlo en etiquetas de apertura y cierre automático, así como en selecciones múltiples.
  • Djaneiro – Django Snippets : una extensa colección de fragmentos para plantillas HTML de django. El uso de esta extensión acortará significativamente el tiempo dedicado a escribir.
  • Vista previa en vivo : la extensión de vista previa en vivo de Microsoft permite el alojamiento de servidores locales. Si tiene un proyecto que no utiliza Angular, React u otras herramientas de servidor, esta extensión permitirá la vista previa de HTML regular e incrustado con actualizaciones de página en tiempo real.
  • Oracle JET Core : esta extensión creada por Oracle Corporation brinda soporte completo para datos HTML personalizados de Oracle JET. Los fragmentos incluidos completarán automáticamente cualquier atributo y etiqueta JET.
  • Navegación CSS : Habilita Ir a definición para HTML a CSS, HTML a Less y HTML a Sass. El comando Peek Definition también está habilitado.
  • Convertidor de caracteres acentuados de HTML : reemplaza perfectamente los caracteres especiales con las entidades HTML apropiadas. Esta extensión es útil según la situación, pero esencial cuando se manejan cadenas localizables.

Puede ejecutar el código de Visual Studio desde su navegador

Además de ejecutar archivos HTML en un navegador, también es posible usar todo el código de Visual Studio en línea. Esto requiere que inicie una versión particular del programa desarrollado para el uso del navegador.

Vale la pena señalar que esta versión es mucho más liviana en comparación con Visual Studio Code de escritorio. Sin embargo, puede ser una solución sencilla para facilitar la navegación por el repositorio y los archivos, así como cambios menores en el código.

Si desea probar la variante de navegador de Visual Studio Code, puede comenzar de inmediato haciendo clic aquí .

Ponga sus archivos HTML en funcionamiento

Abrir archivos HTML en su navegador es fácil con la extensión dedicada para Visual Studio Code. Si decide explorar las amplias ofertas de extensiones para esta herramienta de codificación, la función Abrir en el navegador será solo el comienzo de su viaje.

¿Conseguiste abrir tu archivo HTML en el navegador que elegiste? ¿Qué extensión usaste? Háganos saber en la sección de comentarios.

Sign up and earn $1000 a day ⋙

Leave a Comment

Cómo configurar los parámetros TCP/IP en Windows

Cómo configurar los parámetros TCP/IP en Windows

Su computadora necesita una forma de comunicarse con otros dispositivos, y ahí es donde TCP/IP puede ayudar. TCP/IP garantiza que los datos se muevan sin problemas a través de la red, ya sea que esté navegando por la web o compartiendo archivos.

Archivos que están desperdiciando espacio en tu PC sin que te des cuenta

Archivos que están desperdiciando espacio en tu PC sin que te des cuenta

Los archivos sin comprimir pueden ocupar silenciosamente gigabytes de espacio en su PC con Windows, lo que ralentiza el sistema y satura su disco sin que usted se dé cuenta.

10 maneras de solucionar la falta de Bluetooth en Windows 11

10 maneras de solucionar la falta de Bluetooth en Windows 11

¿La opción Bluetooth desapareció en tu computadora con Windows 11? Esto puede suceder por varios motivos, incluidos fallos temporales, controladores de Bluetooth dañados y problemas con el sistema operativo Windows.

Cómo obtener y brindar soporte remoto mediante la aplicación Asistencia rápida en Windows 11

Cómo obtener y brindar soporte remoto mediante la aplicación Asistencia rápida en Windows 11

Esta guía le mostrará cómo usar la aplicación Asistencia rápida para obtener ayuda o ayudar a alguien a través de una conexión remota en Windows 11.

ExpressVPN ahora es compatible con PC con Windows ARM

ExpressVPN ahora es compatible con PC con Windows ARM

Uno de los servicios VPN más populares del mundo, ExpressVPN, ha lanzado oficialmente una versión de aplicación para PC con Windows que funcionan con procesadores basados ​​en ARM.

Cómo desinstalar Adobe Creative Cloud en Windows correctamente

Cómo desinstalar Adobe Creative Cloud en Windows correctamente

Pocas aplicaciones modernas de Windows son tan difíciles de desinstalar como la suite Adobe Creative Cloud (Adobe CC). Sin embargo, con el enfoque adecuado, puedes eliminar Adobe CC y todos sus rastros en aproximadamente 10 minutos.

Los métodos y personalizaciones de este artículo te ayudarán a acelerar tu Windows 10 como el viento.

Los métodos y personalizaciones de este artículo te ayudarán a acelerar tu Windows 10 como el viento.

¿Quieres acelerar Windows 10, mejorar la velocidad de Windows 10 o acelerar el inicio de Windows 10? Todas las formas de acelerar Windows 10 se encuentran en este artículo, ¡léalo y aplíquelo para que su computadora con Windows 10 funcione más rápido!

Cómo instalar Windows 11 en una PC no compatible

Cómo instalar Windows 11 en una PC no compatible

Si su PC no cumple con los requisitos de hardware de Microsoft, no se rinda todavía. Es posible instalar Windows 11 en PC no compatibles.

Cómo restaurar la configuración de pantalla en Windows 11

Cómo restaurar la configuración de pantalla en Windows 11

Una configuración de pantalla incorrecta o modificada incorrectamente en Windows 11 puede causar problemas. Aquí se explica cómo restaurar la configuración de pantalla en Windows 11.

15 herramientas de diagnóstico para comprobar el estado de su PC con Windows

15 herramientas de diagnóstico para comprobar el estado de su PC con Windows

Independientemente de si es nuevo en Windows o un usuario veterano, es posible que su sistema tarde o temprano presente problemas que no son fáciles de diagnosticar. Antes de llamar al soporte técnico, hay una serie de herramientas de diagnóstico de PC que puedes probar.

¡Esta configuración oculta en Windows hará que los videos se reproduzcan con mayor fluidez!

¡Esta configuración oculta en Windows hará que los videos se reproduzcan con mayor fluidez!

Ya sea que seas un transmisor o disfrutes sumergirte en tu biblioteca de videos personal seleccionada a lo largo de los años, personalizar la configuración de reproducción de videos en tu PC con Windows 11 puede mejorar significativamente tu experiencia multimedia.

Cómo usar la iluminación dinámica de Windows 11 para ajustar las luces RGB

Cómo usar la iluminación dinámica de Windows 11 para ajustar las luces RGB

Windows 11 presenta una característica interesante llamada Iluminación dinámica, un sistema que controla la iluminación RGB en dispositivos como computadoras portátiles, teclados, ratones y otros dispositivos conectados.

Cómo solucionar el código de error 0xc000000f de Windows

Cómo solucionar el código de error 0xc000000f de Windows

El código de error 0xc000000f es un error común en las PC con Windows. A menudo acompañado de mensajes como “Windows no pudo iniciarse” o “Su PC necesita ser reparada”, se encuentra el error de pantalla azul de la muerte (BSOD) que ningún usuario desea ver.

Cómo bloquear la instalación de aplicaciones en unidades que no son del sistema Windows 11

Cómo bloquear la instalación de aplicaciones en unidades que no son del sistema Windows 11

Si desea bloquear la instalación de aplicaciones en unidades distintas de la unidad del sistema, puede deshabilitar esta función a través de la Política de grupo o el Editor del registro.

Cómo comprobar la versión de la aplicación instalada en Windows 11

Cómo comprobar la versión de la aplicación instalada en Windows 11

Aunque las actualizaciones se instalan automáticamente, a veces puede ser necesario comprobar la versión de una aplicación en Windows.