Cómo ejecutar un archivo HTML en Visual Studio Code

Visual Studio Code es un editor de código fuente creado por Microsoft. Está disponible para Windows, macOS y Linux. Con él, puedes escribir y editar códigos en una variedad de lenguajes de codificación, incluyendo HTML. No obstante, ¿qué haces cuando quieres ejecutar un código HTML para ver cómo se ve? Por suerte, existe una serie de extensiones para Visual Studio Code que te permiten ejecutar sin problemas un código HTML desde Visual Studio Code. También puedes utilizar la Terminal para ejecutar un archivo HTML. En este How.com.vn, aprenderás a ejecutar un archivo HTML en Visual Studio Code.

Método 1

Método 1 de 4:

Crear, abrir y guardar un archivo HTML

Descargar el PDF

1
Abre Visual Studio Code. Visual Studio Code tiene un ícono que se asemeja a una cinta de color azul. Haz clic en él para abrirlo. Puedes encontrarlo en el menú Inicio de Windows, la carpeta Aplicaciones en Mac o en el menú Aplicaciones en Linux.
- Si aún no lo has hecho, puedes descargar Visual Studio Code de manera gratuita en https://code.visualstudio.com/. Simplemente haz clic en el botón Download (descargar) en la página web y abre el archivo de instalación desde el navegador web o la carpeta Descargas. Sigue las indicaciones para finalizar la instalación.
2
Abre o crea un nuevo archivo HTML. Utiliza uno de los pasos a continuación para abrir o crear un nuevo archivo:
- Para crear un nuevo archivo, haz clic en File (archivo) en la barra de menú ubicada en la parte superior. A continuación, haz clic en New File (nuevo archivo). Comienza a escribir el código HTML.
- Si quieres abrir un archivo existente, haz clic en File (archivo) en la barra de menú ubicada en la parte superior. A continuación, haz clic en Open File (abrir archivo). Dirígete al archivo HTML que quieres abrir y haz clic en él para seleccionarlo. Ahora haz clic en Open (abrir).
3
Guarda el archivo como archivo HTML. Una vez que estés listo para ejecutar un archivo HTML en Visual Studio Code, primero deberás guardarlo como archivo HTML. Luego de guardarlo, puedes ejecutarlo en cualquier navegador de tu elección. Sigue los pasos a continuación para guardar el archivo HTML en Visual Studio Code:
- Haz clic en File (archivo) en la barra de menú ubicada en la parte superior.
- Haz clic en Save as (guardar como).
- Ingresa un nombre de archivo al lado de "File Name" (nombre de archivo).
- Utiliza el menú desplegable al lado de "Save as type" (guardar según tipo) para seleccionar "HTML".
- Haz clic en Save (guardar).
Anuncio

Método 2

Método 2 de 4:

Utilizar la Terminal

Descargar el PDF

Visual Studio Code tiene un ícono que se asemeja a una cinta de color azul. Haz clic en él para abrirlo. Puedes encontrarlo en el menú Inicio de Windows, la carpeta Aplicaciones en Mac o en el menú Aplicaciones en Linux.
Si aún no lo has hecho, abre un archivo HTML existente, o crea uno nuevo y guárdalo en formato HTML. Si ya tienes abierto un archivo HTML, haz clic en la pestaña que lo contiene ubicada en la parte superior de la pantalla para verlo.
3
Abre una nueva Terminal. Para ello, haz clic en la Terminal ubicada en la parte superior de la pantalla. Luego haz clic en Nueva Terminal. La Terminal es la única forma de ejecutar un archivo HTML en Visual Studio Code sin la necesidad de utilizar una extensión. También es la forma más compleja.
- También puedes hacer clic en Ver en la parte superior y luego en Terminal.
4
Escribe cd seguido de la ruta del archivo HTML y presiona ↵ Enter. Esto te dirigirá a la ubicación del archivo HTML. Por ejemplo, si el archivo HTML se encuentra en la carpeta Documentos, deberás escribir cd \Usuarios\nombredeusuario\Documentos y presionar Enter.
- Si el archivo HTML se guarda en una letra de unidad distinta a la del sistema operativo, deberás cambiar a dicha letra en la Terminal antes de dirigirte a la ruta del archivo HTML. Para ello, simplemente escribe la letra de la unidad (p.ej., D: para una unidad D:) y presiona Enter.
- Si no sabes a ciencia cierta dónde está guardado el archivo HTML, puedes hacer clic derecho en la pestaña de dicho archivo en la parte superior de la pantalla y luego hacer clic en Copiar ruta. Escribe cd en la Terminal y luego pega inmediatamente la ruta. Borra el nombre del archivo al final de la ruta y presiona Enter.
- Si alguna de las carpetas en la ruta al archivo HTML tiene un espacio en el nombre, la Terminal no podrá dirigirse a dicha carpeta. Utiliza el Explorador de archivos en Windows o el Finder en Mac para dirigirte a cualquier carpeta que tenga un espacio en su nombre y cámbiale el nombre eliminando los espacios (es decir, si tienes una carpeta llamada "Archivos HTML", cámbiala a "Archivos_HTML ").
5
Escribe start seguido del nombre del archivo HTML y presiona ↵ Enter. Por ejemplo, si quisieras ejecutar el archivo HTML de índice, escribirías start index.html y presionarías Enter. De esta manera, abrirás el archivo HTML en una ventana aparte que te permitirá previsualizarlo.
- para cerrar la vista previa, simplemente haz clic en el ícono de la “x” en la parte superior de la ventana.^{[1]XFuente de investigación}
Anuncio

Método 3

Método 3 de 4:

Utilizar la extensión “HTML Preview”

Descargar el PDF

Visual Studio Code tiene un ícono que se asemeja a una cinta de color azul. Haz clic en él para abrirlo. Puedes encontrarlo en el menú Inicio de Windows, la carpeta Aplicaciones en Mac o en el menú Aplicaciones en Linux.
Es el ícono que se asemeja a cuatro cuadrados y se ubica en la barra de menú izquierda. Al hacer clic en él, aparecerá el menú de búsqueda Extensiones.
La barra de búsqueda se ubica en la parte superior izquierda del menú Extensiones. A continuación, aparecerá una lista de extensiones que coincidan con la búsqueda. "HTML Preview" es una extensión para Visual Studio Code que te permite previsualizar archivos HTML desde Visual Studio Code utilizando una pantalla dividida o en modo de ventana completa.
Debe ser la primera extensión ubicada en la parte superior de la lista de extensiones. Su creador es Thomas Haakon Townsend. Contiene un ícono similar a un escudo naranja con un "5" en el medio (el logo de HTML 5).
Este botón se ubica debajo del encabezado "HTML Preview" en la página de información ubicada a la derecha del menú de extensiones. Al presionarlo, instalarás la extensión. Espera un par de minutos para que finalice la instalación.
Si aún no lo has hecho, abre un archivo HTML existente o crea un nuevo archivo HTML y guárdalo en dicho formato. Si ya tienes un archivo HTML abierto, haz clic en la pestaña que lo contiene ubicada en la parte superior de la pantalla para poder verlo.
7
Haz clic en el botón de previsualización de pantalla dividida. Es el ícono que se asemeja a una pantalla dividida con una lupa a la izquierda. Se ubica en la esquina superior derecha de la pantalla. Al hacer clic en él, se abrirá una vista previa del archivo HTML en una pantalla dividida dentro de Visual Studio Code.
- Mantén presionada la tecla Alt and y haz clic en el botón de previsualización para tener una vista previa en pantalla completa del código HTML.
- Para cerrar la previsualización, simplemente haz clic en el ícono “x” en la pestaña de previsualización ubicada en la parte superior de la pantalla.
Anuncio

Método 4

Método 4 de 4:

Utilizar la extensión "Open in Browser"

Descargar el PDF

Visual Studio Code tiene un ícono que se asemeja a una cinta de color azul. Haz clic en él para abrirlo. Puedes encontrarlo en el menú Inicio de Windows, la carpeta Aplicaciones en Mac o en el menú Aplicaciones en Linux.
Es el ícono que se asemeja a cuatro cuadrados y se ubica en la barra de menú izquierda. Al hacer clic en él, aparecerá el menú de búsqueda Extensiones.
La barra de búsqueda se ubica en la parte superior izquierda del menú Extensiones. A continuación, aparecerá una lista de extensiones que coincidan con la búsqueda. "Open in browser" es una extensión para Visual Studio Code que te permite abrir un archivo HTML utilizando un navegador web de tu elección desde Visual Studio Code
Debe ser la primera extensión ubicada en la parte superior de la lista. Es la que tiene todas las letras en minúscula y cuyo creador es TechER. Haz clic en ella para seleccionarla.
Este botón se ubica debajo del encabezado "open in browser" en la página de información ubicada a la derecha del menú de extensiones. Al presionarlo, instalarás la extensión. Espera un par de minutos para que finalice la instalación.
Si aún no lo has hecho, abre un archivo HTML existente o crea un nuevo archivo HTML y guárdalo en dicho formato. Si ya tienes un archivo HTML abierto, haz clic en la pestaña que lo contiene ubicada en la parte superior de la pantalla para poder verlo.
A continuación, aparecerá un menú contextual.
8
Haz clic en Open in Default Browser (abrir en el navegador predeterminado). Esto abrirá el archivo HTML en el navegador web predeterminado. Esto te permitirá ver el archivo HTML.^{[2]XFuente de investigación}
- También puedes hacer clic en Open in Other Browser (abrir en otro navegador) y doble clic en el navegador web de tu elección.
- Si se te solicita seleccionar un navegador web predeterminado, haz clic en el navegador en el que quieres abrir el archivo y luego en Ok.
Anuncio