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 ⋙

¿BaldurS Gate 3 es multiplataforma? Aún no

¿BaldurS Gate 3 es multiplataforma? Aún no

Después de mucho entusiasmo y anticipación, se lanzó “Baldur's Gate 3”. Pero, antes de sumergirse en el juego, muchos jugadores querrán saber si

Cómo solucionar el error del controlador DS4Windows que no detecta

Cómo solucionar el error del controlador DS4Windows que no detecta

¿Tiene problemas con la conexión de su controlador? Estás listo para jugar, pero sin usar tu controlador, se acabó el juego. No eres el único jugador

Cómo restablecer habilidades en Diablo 4

Cómo restablecer habilidades en Diablo 4

¿Has estado buscando una manera de modificar la estructura de tu jugador sin recrear un nuevo personaje en “Diablo 4”? Bueno, estás de suerte. El juego te permite

Cómo ajustar el brillo en una PC con Windows 10

Cómo ajustar el brillo en una PC con Windows 10

La configuración del brillo de la pantalla es una característica crucial, independientemente del dispositivo que utilice. Pero es particularmente importante obtener el nivel de brillo.

Cómo conseguir Yama en frutas Blox

Cómo conseguir Yama en frutas Blox

El Yama es una de las Katanas Malditas del juego y tiene el estatus de Legendario. Empuñar un arma tan potente en el mundo abierto de “Blox Fruits” te ofrecerá

Cómo reparar la falta del adaptador de red de Windows 10

Cómo reparar la falta del adaptador de red de Windows 10

El adaptador de red en el sistema operativo Windows es un dispositivo vital que garantiza que las conexiones de red funcionen sin problemas. Dado que el adaptador de red recibe

Cómo obtener ayuda en Windows

Cómo obtener ayuda en Windows

Incluso si ha estado usando Windows durante mucho tiempo, es posible que ocasionalmente encuentre desafíos que requieran la asistencia de un experto. Ya sea que estés enfrentando

Cómo ver las contraseñas de Wi-Fi guardadas en Windows 11

Cómo ver las contraseñas de Wi-Fi guardadas en Windows 11

Hay pocas cosas más frustrantes que quedarse sin acceso a su red de Internet. Si no ha escrito la contraseña, corre el riesgo de perder el acceso

Dónde encontrar la ubicación del fondo de pantalla de Windows en su PC

Dónde encontrar la ubicación del fondo de pantalla de Windows en su PC

Aquí está la ubicación del fondo de pantalla de Windows para Windows 8 y 10, para que pueda usar estas imágenes de alta resolución con otros dispositivos o versiones anteriores de Windows.

Cómo probar la cámara en una PC con Windows 10

Cómo probar la cámara en una PC con Windows 10

Si desea tomar fotografías con su PC con Windows 10, primero deberá probar la función de la cámara. Ya sea que solo quieras tomarte algunos selfies para

Cómo eliminar archivos temporales en una PC con Windows 10 u 11

Cómo eliminar archivos temporales en una PC con Windows 10 u 11

Una vez que su computadora comienza a retrasarse, es una señal de que necesita liberar algo de espacio. Por lo general, eliminar archivos temporales es un excelente punto de partida.

Resumen de accesos directos a aplicaciones de Películas y TV en Windows 10

Resumen de accesos directos a aplicaciones de Películas y TV en Windows 10

Resumen de accesos directos a aplicaciones de Películas y TV en Windows 10, Resumen de accesos directos a aplicaciones de Películas y TV en Windows 10 para brindarle una gran experiencia. Tal vez

Cómo corregir el error de mensajes que no se pudieron cargar en Discord para Windows

Cómo corregir el error de mensajes que no se pudieron cargar en Discord para Windows

Cómo corregir el error de mensajes que no se pudieron cargar en Discord para Windows. Discord no es divertido si no puedes leer lo que escriben otras personas. A continuación se explica cómo solucionar el error de Mensajes

Cómo mostrar el ícono de Esta PC en el escritorio de Windows 11

Cómo mostrar el ícono de Esta PC en el escritorio de Windows 11

Cómo mostrar el ícono de Esta PC en el escritorio de Windows 11. Durante el proceso de uso de Windows 11, muchos usuarios necesitan acceder a Esta PC (administración).

Cómo encontrar información en el Registro de Windows rápidamente

Cómo encontrar información en el Registro de Windows rápidamente

Cómo encontrar información en el Registro de Windows rápidamente, ¿Te resulta difícil encontrar información en el Registro de Windows? A continuación se muestran formas rápidas de encontrar el registro.

Cómo limitar la cantidad de intentos fallidos de inicio de sesión en Windows 10

Cómo limitar la cantidad de intentos fallidos de inicio de sesión en Windows 10

Cómo limitar la cantidad de intentos fallidos de inicio de sesión en Windows 10. Limitar la cantidad de intentos fallidos de inicio de sesión con contraseña en Windows 10 ayuda a aumentar la seguridad de la computadora. Así es cómo

Cómo crear mensajes de error falsos en Windows

Cómo crear mensajes de error falsos en Windows

Cómo crear mensajes de error falsos en Windows. Windows puede generar algunos mensajes de error bastante creativos, pero ¿por qué no intentas crear tu propio contenido para que se burlen de ellos?

Formas de abrir herramientas de Windows en Windows 11

Formas de abrir herramientas de Windows en Windows 11

Las formas de abrir las herramientas de Windows en Windows 11, las herramientas administrativas de Windows o las herramientas de Windows siguen siendo útiles en Windows 11. Aquí se explica cómo encontrar las herramientas de Windows en Windows 11.

Cómo solucionar el error de Asistencia rápida de Windows que no funciona

Cómo solucionar el error de Asistencia rápida de Windows que no funciona

Cómo solucionar el error de Windows Quick Assist que no funciona, Windows Quick Assist le ayuda a conectarse fácilmente a una PC remota. Sin embargo, en ocasiones también genera errores. Pero,

Cómo fijar archivos de Word, Excel y PowerPoint al ícono de la aplicación correspondiente en la barra de tareas de Windows 11

Cómo fijar archivos de Word, Excel y PowerPoint al ícono de la aplicación correspondiente en la barra de tareas de Windows 11

¿Cómo anclar archivos de Word, Excel y PowerPoint al ícono de la aplicación correspondiente en la barra de tareas de Windows 11? ¿Cómo anclar archivos de Office al ícono de la barra de tareas en Windows 11? Invitar