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 solucionar el error Necesitaremos su contraseña actual de Windows en Windows 10/11

Cómo solucionar el error Necesitaremos su contraseña actual de Windows en Windows 10/11

¿Está recibiendo el error "Necesitaremos su contraseña actual de Windows una última vez"? Esta molesta ventana emergente puede impedirle realizar su trabajo.

Solucione rápidamente el error de volumen de arranque imposible de montar en Windows 10/11

Solucione rápidamente el error de volumen de arranque imposible de montar en Windows 10/11

El error de volumen de arranque imposible de montar se produce debido a que algún software instalado entra en conflicto con el sistema operativo o porque la computadora se apaga repentinamente... En el siguiente artículo, WebTech360 lo guiará a través de algunas formas de solucionar este error.

Cómo corregir el error del historial del portapapeles en la última actualización de Windows 11

Cómo corregir el error del historial del portapapeles en la última actualización de Windows 11

Si utiliza el Historial del Portapapeles para almacenar datos para su uso posterior, existe una pequeña posibilidad de que los datos permanezcan vacíos sin importar lo que intente.

Cómo eliminar Copilot y otras funciones de IA en Windows

Cómo eliminar Copilot y otras funciones de IA en Windows

Si no le importa tener bloatware adicional en su sistema, existen formas de eliminar o deshabilitar Windows Copilot en Windows 11.

¿Por qué la estimación del porcentaje de batería de la computadora portátil nunca es precisa?

¿Por qué la estimación del porcentaje de batería de la computadora portátil nunca es precisa?

La mayoría de los usuarios de computadoras portátiles se han encontrado con una situación en la que Windows muestra que quedan 2 horas de duración de batería y, cinco minutos después, aumenta a 5 horas o incluso a alrededor de 1 hora. ¿Por qué el tiempo salta tanto?

10 configuraciones de Windows 11 para maximizar la duración de la batería del portátil

10 configuraciones de Windows 11 para maximizar la duración de la batería del portátil

Las baterías de las computadoras portátiles se degradan con el tiempo y pierden capacidad, lo que resulta en un menor tiempo de actividad. Pero después de ajustar algunas configuraciones más profundas de Windows 11, debería ver una mejora notable en la duración de la batería.

Microsoft: Las PC con Windows 11 21H2/22H2 se verán obligadas a actualizar a 23H2 el próximo mes

Microsoft: Las PC con Windows 11 21H2/22H2 se verán obligadas a actualizar a 23H2 el próximo mes

La versión 21H2 de Windows 11 es una de las principales versiones originales de Windows 11 que comenzó a implementarse a nivel mundial el 4 de octubre de 2021.

Microsoft envía spam con códigos QR de Copilot en la pantalla de bloqueo de Windows 11 para atraer a los usuarios

Microsoft envía spam con códigos QR de Copilot en la pantalla de bloqueo de Windows 11 para atraer a los usuarios

En el año 2023, Microsoft apostó fuerte por la inteligencia artificial y su asociación con OpenAI para hacer de Copilot una realidad.

Cómo deshabilitar cuentas de usuario en Windows 11

Cómo deshabilitar cuentas de usuario en Windows 11

Puede desactivar las cuentas de usuario para que otros ya no puedan acceder a su computadora.

Comprar una computadora portátil con Windows es más difícil que nunca

Comprar una computadora portátil con Windows es más difícil que nunca

¿Es la NPU lo suficientemente diferente como para retrasar la compra y esperar a que el PC Copilot+ se generalice?

Cómo activar y desactivar el modo de ahorro de batería en una computadora portátil con Windows 11

Cómo activar y desactivar el modo de ahorro de batería en una computadora portátil con Windows 11

El modo de ahorro de batería de Windows 11 es una función diseñada para extender la vida útil de la batería de la computadora portátil.

Microsoft lanza la nueva aplicación Sticky Notes para Windows 11

Microsoft lanza la nueva aplicación Sticky Notes para Windows 11

Después de mantener las cosas iguales durante años, la actualización de Sticky Note a mediados de 2024 cambió el juego.

Cómo solucionar el error IRQL NOT LESS OR EQUAL en Windows

Cómo solucionar el error IRQL NOT LESS OR EQUAL en Windows

El error IRQL NOT LESS OR EQUAL es un error relacionado con la memoria que generalmente ocurre cuando un proceso o controlador del sistema intenta acceder a una dirección de memoria sin los permisos de acceso adecuados.

6 formas de copiar rutas de archivos y carpetas en Windows 11

6 formas de copiar rutas de archivos y carpetas en Windows 11

Las rutas son las ubicaciones de los archivos o carpetas en Windows 11. Todas las rutas incluyen las carpetas que debe abrir para llegar a una ubicación específica.

Comparar Windows 10 y Windows 11

Comparar Windows 10 y Windows 11

Windows 11 se lanzó oficialmente, en comparación con Windows 10 Windows 11 también tiene muchos cambios, desde la interfaz hasta nuevas características. Por favor, siga los detalles en el artículo siguiente.