Cómo abrir en el navegador desde VS Code

Cómo abrir en el navegador desde VS Code

Volvemos un día más con nuevos artículos en Bobbli. Hoy traemos: Cómo abrir en el navegador desde VS Code

Si está utilizando 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 hacer esto. Esto puede ser frustrante, especialmente si desea ver rápidamente el resultado de su codificación.

Cómo abrir en el navegador desde VS Code

Afortunadamente, puede habilitar la función «Abrir en el navegador» con otros métodos. Este artículo le mostrará cómo hacerlo.

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 simple, al igual que su uso para abrir archivos en un navegador.

  1. Abra su archivo HTML en Visual Studio Code Editor.
  2. Haz clic en «Extensiones» en la barra de herramientas vertical más a la izquierda. 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. Escribe «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 instalar el programa.
  7. Seleccione Explorador en la barra de herramientas de la izquierda.
  8. Localice su archivo HTML en el Explorador y haga clic derecho sobre él. Seleccione «Abrir en el navegador predeterminado» o «Abrir en otros navegadores».
  9. Si selecciona «Abrir en el navegador predeterminado», el archivo HTML se iniciará de forma predeterminada en cualquier navegador que esté configurado. Si elige «Abrir en otros navegadores», debe especificar qué navegador usar.

Puede encontrar muchas extensiones útiles en Visual Studio Marketplace. O puede obtener las extensiones Abrir en el navegador revisadas por los 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 Mac

Visual Studio Code se puede actualizar utilizando varias extensiones que amplían la funcionalidad del programa. Un tipo de extensión puede permitir que los archivos HTML, PHP o JS se abran en el navegador predeterminado o en cualquier otro navegador. Aquí se explica cómo habilitar esta opción en Mac.

  1. Abra el archivo deseado con Visual Studio Code Editor.
  2. Vaya a la barra de herramientas de la izquierda y seleccione «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 instalar el software.
  6. Vaya a la barra de herramientas de la izquierda y seleccione Explorador.
  7. Busque 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» abre el archivo usando el navegador preseleccionado. «Abrir en otros navegadores» abre un mensaje donde puede elegir uno de los navegadores instalados en su máquina.

Visual Studio Marketplace tiene una amplia variedad de extensiones que pueden agregar nuevas funciones a Visual Studio Code. Si desea cambiar más el programa, vale la pena explorar el sitio web. Además, si solo está interesado en las extensiones Abrir en el navegador, aquí hay algunas sugerencias: Extensión 1, Extensión 2, Extensión 3, Extensión 4.

Abrir en acceso directo del navegador

Casi todos los complementos 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 de teclas específica que permitirá abrir el 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 la página de Marketplace.

Ejecutar HTML en Visual Studio Code

Si está interesado en trabajar con HTML en Visual Studio Code, aquí hay algunas formas de 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. Usando HTML:5, habilite la plantilla 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. Deje el navegador abierto, regrese a Visual Studio Code y guarde sus cambios y edite el archivo HTML.
  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. Mientras continúa editando el archivo HTML, repita los pasos 5 y 6 para verificar su progreso.

El método manual puede ayudarlo a realizar un seguimiento de su trabajo. Pero hay una solución aún mejor: la carga automática. Esta opción requiere que instales otra extensión, pero vale la pena.

  1. En Visual Studio Code, vaya a Extensiones ubicado debajo de la barra de herramientas izquierda.
  2. Escribe «servidor en vivo» en la barra de búsqueda de extensiones.
  3. Haga clic en el botón «Instalar» junto a la extensión Live Server.
  4. Cree y guarde un nuevo archivo HTML.

  5. Haga clic derecho en su nuevo archivo en Visual Studio Code Explorer. 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 y guarde un cambio en el código, su navegador debería actualizarse y mostrar el nuevo contenido. No tendrá que actualizar manualmente la página y, en su lugar, podrá confirmar visualmente los cambios en tiempo real.

Otras extensiones HTML útiles de Visual Studio Code

Como se mencionó, Visual Studio Marketplace está repleto de excelentes herramientas, la mayoría de ellas para 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: 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 abriendo un fragmento cuando está parcialmente escrito.
  • 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 divide los atributos HTML, así como los accesorios y directivas de Angular, Vue y React. Puede usarlo para abrir y cerrar etiquetas y selecciones múltiples.
  • Djaneiro – Django Snippets: una colección completa de widgets para plantillas HTML de Django. El uso de esta extensión reducirá 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 usa Angular, React u otras herramientas de servidor, esta extensión permite una vista previa de HTML regular e incrustada con actualizaciones de página en tiempo real.
  • Oracle JET Core: creada por Oracle Corporation, esta extensión brinda soporte completo para datos HTML personalizados de Oracle JET. Los fragmentos incluidos completarán automáticamente todas las características y etiquetas de 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.
  • Conversor de caracteres acentuados de HTML: reemplaza perfectamente los caracteres especiales con las entidades HTML adecuadas. Esta extensión es útil con estado, pero importante 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 la totalidad de Visual Studio Code en línea. Esto requiere que inicie una versión específica 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 simple 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 especial para Visual Studio Code. Si decide explorar la amplia oferta de extensiones para esta herramienta de codificación, la funcionalidad Abrir en el navegador será solo el comienzo de su viaje.

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

¡Duda resuelta! Si quieres saber más sobre PC, Apple, Móvil, Gaming, Redes Sociales, Entretenimiento, Internet…, Bobbli.com es tu web.