Cómo ejecutar un archivo HTML en VS Code
Visual Studio Code (VS Code) se presenta como una excelente alternativa a los editores de código más grandes y complejos para quienes se inician en la codificación. Para los desarrolladores web, en particular, ofrece muchas oportunidades para escribir y modificar secciones HTML, además de muchas características que hacen que el desarrollo sea un viaje emocionante.
Pero, ¿cómo se ejecuta exactamente un archivo HTML en VS Code si ¿Eres nuevo en el mundo del desarrollo? Respondamos esta pregunta y exploremos las funciones que VS Code tiene reservadas para los codificadores HTML.
Ejecutar un archivo HTML en VS Code
Aunque VS Code no tiene una vista previa HTML obvia funcionalidad tan pronto como lo inicias, lo compensa con una enorme gama de extensiones. Estos complementos de la comunidad pueden llenar el vacío y brindarle una función de visualización en tiempo real como si siempre hubiera estado integrada. Aquí se explica cómo usarlos:
Abra el Vista de extensiones en VS Code presionando Ctrl+Shift+X. Desde aquí, puede buscar cualquier extensión que se adapte a sus necesidades.
Para encontrar la extensión correcta, escriba palabras clave como “vista en vivo”o “vista previa HTML”dentro de esta vista. Cada extensión tiene características diferentes, como vistas previas en vivo fáciles de usar o vistas de navegador integradas dentro del entorno VS Code.
Una vez que encuentre la extensión que parezca adecuado para su proyecto, haga clic en”Instalar”y será parte
de su entorno de Visual Studio Code para uso futuro.
Haga clic en el botón de vista previa de pantalla dividida para ver su archivo HTML en la pantalla dividida.
Entonces, es hora de explorar nuevas capacidades de la extensión que acaba de instalar. Consulte su documentación o vea qué opciones están disponibles a través de los menús contextuales del botón derecho dentro de su archivo HTML.
Ejecute HTML en Terminal
Si Prefiero no jugar con las extensiones todavía, la Terminal en VS Code te permite ejecutar un archivo HTML sin extensiones, aunque es un poco más complejo:
Abre o crea un nuevo archivo para código HTML.
Haga clic en Terminal en la parte superior y seleccione Nueva Terminal para abrirlo.
Cambie a la ubicación de su archivo HTML con el 
Escribe “start “seguido del nombre del archivo HTML y presiona Enter. Esto iniciará el archivo HTML en su navegador predeterminado.
Abrir en el navegador
Volver a extensiones, otra extensión útil para HTML y web El desarrollo, en general, es”Abrir en el navegador”, que abre un archivo HTML en el navegador web directamente desde VS Code. Aquí se explica cómo:
Haga clic en el botón Extensiones en el costado.
Escriba “abrir en el navegador”en la barra de búsqueda para encontrar la extensión.
Una vez que vea la extensión del mismo nombre, instálela.
Después de instalarlo, haga clic derecho en cualquier parte de su código HTML.
Seleccione”Abrir en el navegador predeterminado”o elija otro navegador en”Abrir en otro navegador”. opción.
Funciones avanzadas para el desarrollo HTML en VS Code
Una vez que haya configurado su entorno de desarrollo y obtenga todas las extensiones adecuadas, su proyecto tendrá acaba de empezar. Exploremos brevemente las funciones de VS Code que puede utilizar mientras visualiza archivos HTML para facilitar su trabajo.
IntelliSense
IntelliSense es el compañero de programación digital que acelera el desarrollo al completar automáticamente su código a medida que escribe. Adivina el código más probable y lo hace de forma inteligente y no invasiva. IntelliSense ofrece ayuda instantánea al escribir estructuras HTML, predice correctamente cuándo necesita cerrar etiquetas y ofrece una lista basada en el contexto de elementos o atributos potenciales.
Esta función le evita perder tiempo desplazándose por las sintaxis o manualmente insertando y memorizando todo. De esta manera, podrá crear un sitio web más rápido que nunca.
Validación
Cometer errores de codificación es inevitable sin importar cuán experimentado o conocedor sea: los errores le ocurren a todos. Sin embargo, encontrar estos errores a tiempo puede evitarle una depuración interminable. VS Code tiene una ingeniosa validación incorporada que pone bajo escrutinio el HTML, JavaScript y CSS incrustados para detectar errores antes de que ingresen a su sitio web y causen interrupciones a los usuarios. Un sitio web libre de errores es aquel que atrae a los usuarios y los hace permanecer.
Formato
Mantener el formato correcto a veces puede resultar desalentador, especialmente si estás en el”lanzarle cosas y ver qué funciona”. Organizar no siempre es fácil. Pero sin la estructura adecuada, las cosas pueden volverse confusas y confusas rápidamente para usted y otros desarrolladores que posiblemente colaboren con usted.
Con VS Code’s Con el comando Formatear documento (Ctrl+Mayús+I), puedes mantener el código limpio y ordenado, siguiendo los estándares de la industria. Es una alteración aparentemente pequeña que se realiza con un solo clic, pero una vez que la ves, aprecias instantáneamente su funcionalidad.
Emmet Snippets
Los fragmentos de Emmet para VS Code pueden acelerar enormemente su desarrollo. Imagine que tiene dieciséis botones para diseñar para una barra de navegación. Escribir las etiquetas de cada botón manualmente sería una tarea minuciosa. Los fragmentos le permiten Realice rápidamente estas tareas repetitivas para tener más tiempo para el corazón de su proyecto.
Con estas poderosas abreviaturas taquigráficas, dominar estructuras HTML (y CSS) complejas es simple. Puede agregar cualquier código que espere usar con frecuencia y simplemente agregarlo a su archivo. Ya seas un principiante o un programador experimentado, no querrás perderte el truco que te permite ahorrar tiempo al usar fragmentos de código.
Extensiones en abundancia
El VS Code Marketplace está repleto con un espectro de extensiones. La mayoría de ellos están creados por miembros entusiastas de la comunidad y desarrolladores como usted, que comparten sus conocimientos para facilitar el trabajo de otros. Las herramientas de Linting mantienen su código impecablemente limpio, los servidores en vivo actualizan su navegador en segundo plano a medida que lo renderiza y mucho más. Es una potencia para la creación de aplicaciones web sofisticadas. Si necesita codificación, lo más probable es que haya una extensión en Marketplace lista para satisfacerla.
Selector de color
En el desarrollo web, los elementos visuales lo son todo. Con el selector de color de VS Code, no es necesario memorizar códigos hexadecimales complejos. Elija colores, observe cómo se ven en tiempo real e incluso explore y comprenda cómo se conectan con los tonos y matices vecinos.
Personalizar VS Code para el desarrollo HTML
VS Code no es un editor hecho en fábrica que debe verse de cierta manera. Suponga que desea temas tenues para maratones de codificación que duran toda la noche o una visualización más accesible con menos fatiga visual, espaciado de tabulación específico para mejorar la composición y organización del código, o formatos de datos personalizados diseñados para proyectos exclusivos. En ese caso, VS Code tiene muchas opciones de personalización.
HTML, en particular, es un lenguaje de marcado sencillo que, si lo deseas, también puedes escribir en el viejo Bloc de notas, pero luego lo harías. Se perderá muchas de las comodidades que ofrecen los editores como VS Code. Acceda a la configuración, explore y remodele el editor: conviértalo en una expresión de su personalidad de codificación.
Desarrollo web en tiempo real
Al principio, ejecute un archivo HTML en VS Code Puede parecer un poco oscuro, especialmente si fue dirigido a este editor específicamente por sus conveniencias de desarrollo web. Pero con las extensiones adecuadas (o la práctica Terminal) y una comprensión de las capacidades del editor, es muy sencillo.
VS Code combina interfaces simples y funciones potentes para que los desarrolladores web principiantes y experimentados hagan el trabajo rápidamente. Todas estas características interesantes probablemente lo convertirán en su lugar preferible para manipular código, y no solo HTML.
¿Es Visual Studio Code su editor preferido para escribir en HTML? ¿Es usted un desarrollador web experimentado o recién está comenzando? Deje un comentario a continuación y comparta sus historias, consejos y trucos.
Descargo de responsabilidad: algunas páginas de este sitio pueden incluir un enlace de afiliado. Esto no afecta nuestra editorial de ninguna manera.
