Cómo abrir en el navegador desde VS Code

Si usa archivos HTML, PHP o JS, puede abrirlos en un navegador desde Visual Studio Code. Sin embargo, no existe una opción integrada para esto. Esto puede ser molesto, especialmente si desea ver rápidamente el resultado de su codificación.

Afortunadamente, puede habilitar la función «Abrir en el navegador» de otras maneras. Este artículo le mostrará cómo.

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 la extensión. Instalar extensiones en Visual Studio Code es relativamente fácil, al igual que usarlos para abrir archivos en un navegador.

• Abra el archivo HTML en el Editor de código de Visual Studio .

• En la barra de herramientas vertical más a la izquierda, haga clic en Extensiones. Alternativamente, puede usar el atajo de teclado «Ctrl + Shift + X» para iniciar extensiones.

• Haga clic en la barra de búsqueda para habilitar la entrada.

• Escribe «abrir en el navegador». Seleccione la extensión que coincida con su consulta de búsqueda.

• Haga clic en el botón «Instalar».

• Vuelva a cargar el programa.
• Seleccione Explorador de archivos en la barra de herramientas de la izquierda.

• Busque su archivo HTML en el Explorador de archivos y haga clic con el botón derecho en él. Seleccione «Abrir en el navegador predeterminado» o «Abrir en otros navegadores».

• Si selecciona la opción «Abrir en el navegador predeterminado», el archivo HTML se ejecutará en cualquier navegador predeterminado. Si selecciona «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 Mac

Visual Studio Code se puede actualizar con varias extensiones que aumentan la funcionalidad del programa. Un tipo de extensión le permite abrir archivos HTML, PHP o JS en su navegador predeterminado o en un navegador diferente. Aquí se explica cómo habilitar esta opción en una Mac.

• Con Visual Studio Code Editor, abra el archivo deseado.

• Vaya a la barra de herramientas de la izquierda y seleccione «Extensiones».

• Haga clic en la barra de búsqueda en la barra de extensión y escriba «abrir en el navegador».

• Seleccione una extensión y haga clic en Instalar.

• Vuelva a cargar el software.
• Vaya a la barra de herramientas izquierda y seleccione Explorador de archivos.

• Busque el archivo que desea abrir en la barra del explorador y haga clic derecho sobre él. Seleccione «Abrir en el navegador predeterminado» o «Abrir en otros navegadores».

• La opción «Abrir en el navegador predeterminado» abrirá el archivo usando el navegador preseleccionado. «Abrir en otros navegadores» mostrará un mensaje donde puede seleccionar uno de los navegadores instalados en su computadora.

Visual Studio Marketplace ofrece una amplia variedad de extensiones que pueden agregar nuevas funciones a Visual Studio Code. Vale la pena explorar el sitio web si desea personalizar aún más el programa. Y 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 todas las extensiones Open in Browser para Visual Studio Code vienen con atajos de teclado incluidos. Sin embargo, las etiquetas no son uniformes. En cambio, cada extensión tiene una combinación de teclas específica que activa la apertura del archivo en su navegador.

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

• Extensión 1: «Ctrl + 1» en Windows, «Comando + 1» en Mac.

• Extensión 2: «Ctrl + Alt + O» en Windows, «Comando + Opción (Alt) + O» en Mac.

• Extensión 3: «Ctrl + Shift + F9» en Windows, «Command + Shift + F9» en Mac.

• Extensión 4: «Ctrl + Shift + P» en Windows, «Command + Shift + P» en Mac.

Tenga en cuenta que estos accesos directos solo funcionarán con las extensiones correspondientes vinculadas en este artículo. Si elige instalar otra extensión, lo más probable es que los accesos directos correspondientes aparezcan en su 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 en su programa.

El primer método es descargar manualmente el archivo que desea ejecutar.

• Abra Visual Studio Code y cree un nuevo archivo HTML.

• Vaya a Archivo, luego haga clic en Guardar.

• Utilizando HTML:5, active la plantilla para HTML. Luego abra el archivo que guardó en el paso 2.

• Use la extensión «Abrir en el navegador» que instaló anteriormente para iniciar el archivo en el navegador.
• Con su navegador abierto, regrese a Visual Studio Code y edite el archivo HTML, guardando sus cambios.

• Regrese al navegador y haga clic en Actualizar. Debería ver el cambio de página dependiendo de su edición.

• 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, existe una solución aún mejor: la carga automática. Esta opción requerirá que instales otra extensión, pero vale la pena.

• En Visual Studio Code, vaya a la sección «Extensiones» ubicada en la parte inferior de la barra de herramientas izquierda.

• En la barra de búsqueda de extensiones, escriba «servidor en vivo».

• Haga clic en el botón «Instalar» junto a la extensión Live Server.

• Cree y guarde un nuevo archivo HTML.

• En Visual Studio Code Explorer, haga clic con el botón derecho en el nuevo archivo. Seleccione «Abrir servidor en vivo».

• El archivo HTML se abrirá en el navegador. Una vez que esto suceda, intente editar el código HTML. Guarda tu progreso.

• Tan pronto como realice 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, sino que puede confirmar visualmente 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í hay diez de las extensiones HTML más útiles y mejor calificadas.

• lit-plugin : una herramienta que proporciona resaltado de sintaxis, valida la entrada y ayuda a completar el código sin errores. Esta extensión tiene reglas personalizadas.
• 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 expandiendo el fragmento después de que se imprima 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 más.
• Eliminar atributos HTML : esta extensión eliminará los atributos HTML, así como los accesorios y directivas de Angular, Vue y React. Puede usarlo para etiquetas de apertura y cierre automático, así como para selecciones múltiples.
• Djaneiro – Django Snippets : una extensa colección de fragmentos para plantillas HTML de django. El uso de esta extensión reducirá en gran medida el tiempo dedicado a escribir.
• Vista previa en vivo : la extensión de vista previa en vivo de Microsoft le permite alojar un servidor local. Si tiene un proyecto que no usa Angular, React u otras herramientas del lado del servidor, esta extensión le permitirá realizar vistas previas de HTML regulares y en línea con actualización de página en tiempo real.
• Oracle JET Core : creada por Oracle Corporation, esta extensión brinda soporte completo para datos HTML de Oracle JET personalizados. Los fragmentos incluidos completarán automáticamente cualquier atributo y etiqueta JET.
• Navegación CSS : le permite navegar a las definiciones de HTML en CSS, HTML en Less y HTML en Sass. El comando Peek Definition también está incluido.
• Convertidor de caracteres HTML acentuado : reemplaza sin problemas los caracteres especiales con las entidades HTML correspondientes. Esta extensión es útil en ciertas situaciones, pero necesaria cuando se trata de cadenas localizables.

Puede ejecutar Visual Studio Code desde su navegador

Además de ejecutar archivos HTML en un navegador, también puede usar todo Visual Studio Code en línea. Esto requiere que ejecute una versión específica de un programa diseñado para ser utilizado en un navegador.

Vale la pena señalar que esta versión es mucho más ligera que Visual Studio Code for Desktop. Sin embargo, puede ser una solución sencilla para navegar fácilmente por el repositorio y los archivos, y para realizar cambios menores en el código.

Si desea probar la versión basada en navegador de Visual Studio Code, puede comenzar de inmediato haciendo clic aquí .

Prepare sus archivos HTML y ejecútelos

Abrir archivos HTML en el navegador es más fácil con una extensión personalizada para Visual Studio Code. Si elige explorar las amplias ofertas de extensión para esta herramienta de codificación, la función «Abrir en el navegador» solo será el comienzo de su viaje.

¿Pudiste abrir el archivo HTML en el navegador que elegiste? ¿Qué extensión usaste? Háganos saber en los comentarios a continuación.