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.

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 .
   
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.
   
3. Haga clic en la barra de búsqueda para habilitar la escritura.
   
4. Ingrese "abrir en el navegador". Elija una extensión que coincida con su término de búsqueda.
   
5. Haga clic en el botón "Instalar".
   
6. Vuelva a cargar el programa.
7. Seleccione el Explorador de la barra de herramientas de la izquierda.
   
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".
   
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.
   
2. Ve a la barra de herramientas de la izquierda y selecciona "Extensiones".
   
3. Haga clic en la barra de búsqueda en el panel Extensiones y escriba "abrir en el navegador".
   
4. Elija una extensión y haga clic en "Instalar".
   
5. Vuelva a cargar el software.
6. Vaya a la barra de herramientas de la izquierda y seleccione Explorador.
   
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".
   
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.
   

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.
   
   
2. Extensión 2: “Ctrl + Alt + O” en Windows, “Comando + Opción (Alt) + O” en Mac.
   
3. Extensión 3: “Ctrl + Shift + F9” en Windows, “Command + Shift + F9” en Mac.
   
   
4. Extensión 4: “Ctrl + Shift + P” en Windows, “Command + Shift + P” en Mac.
   
   

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.
   
2. Vaya a "Archivo", luego haga clic en "Guardar".
   
3. Utilizando HTML:5, active la plantilla para HTML. Luego, abra el archivo que guardó en el paso 2.
   
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.
   
6. Regrese al navegador y haga clic en Actualizar. Debería ver el cambio de página en función de su edición.
   
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.
   
2. En la barra de búsqueda de Extensiones, escriba "servidor en vivo".
   
3. Haga clic en el botón "Instalar" junto a la extensión Live Server.
   
4. Cree y guarde un nuevo archivo HTML.
   
   
5. En Visual Studio Code Explorer, haga clic derecho en su nuevo archivo. Seleccione "Abrir servidor en vivo".
   
6. El archivo HTML se abrirá en el navegador. Una vez que lo haga, intente editar el código HTML. Guarda tu progreso.
   
   
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.
   

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.