Aprender a programar empieza por elegir bien tus herramientas, y Visual Studio Code es hoy uno de los editores más usados por desarrolladores principiantes y profesionales. Aquí descubrirás por qué necesitas un editor de código, cómo instalarlo paso a paso y cómo configurar tu primer archivo HTML para que reconozca tildes y caracteres especiales.
Por qué necesitas un editor de código y no Word
Los editores de código trabajan con texto plano, es decir, texto sin formato, sin negritas, cursivas, subrayados ni colores aplicados al contenido. Word, WordPerfect o cualquier procesador de texto enriquecido no sirven para programar porque añaden formato invisible que rompe el código.
¿Qué es texto plano? Es texto sin ningún tipo de formato visual incrustado. No tiene negritas, fuentes ni estilos guardados dentro del archivo, solo caracteres puros que el navegador puede interpretar como código.
La magia de un editor como Visual Studio Code está en que detecta errores y los resalta visualmente con colores. No atrapa todos los errores, pero ayuda muchísimo a quien está aprendiendo.
Qué otros editores existen además de VS Code
Microsoft posicionó a Visual Studio Code como referencia en los últimos años, pero existen muchas alternativas válidas. Puedes elegir la que quieras, porque al final el archivo es el mismo.
- Sublime Text.
- Notepad++.
- Atom.
- Eclipse.
- Dreamweaver.
Lo que sí importa es la extensión del archivo, porque así el editor detecta si estás escribiendo HTML, CSS, JavaScript o Python [02:00]. Sin la extensión correcta, el editor no sabe qué tipo de código estás escribiendo y pierde su capacidad de ayudarte.
Cómo descargar e instalar Visual Studio Code paso a paso
El proceso es directo y similar a cualquier otra instalación de software en tu computadora.
- Busca en Google Visual Studio Code o entra a code.visualstudio.com.
- Haz clic en el botón grande de descarga para tu sistema operativo.
- Espera a que termine la descarga y abre el instalador.
- Acepta el acuerdo de licencia y avanza con Siguiente.
- Marca la opción de crear un acceso directo en el escritorio.
- Activa Abrir con Code en el menú contextual y agrégalo al PATH.
- Finaliza la instalación y abre el programa.
La opción de agregar al PATH te permitirá invocar VS Code desde la terminal más adelante, algo útil cuando avances al curso de Terminal y línea de comandos [03:30].
Cómo abrir tu primer archivo HTML en VS Code
Una vez abierto el editor, ve a File y luego a Open file. Navega hasta la carpeta donde guardaste tu archivo, por ejemplo una carpeta llamada Programar en el escritorio, y selecciona pagina.html.
VS Code te preguntará si confías en los archivos de esa carpeta. Marca recordar la decisión y dale abrir. Ya puedes cerrar el bloc de notas, no lo necesitas más.
Qué significan los colores en Visual Studio Code
Apenas abras tu archivo HTML, notarás que el código aparece pintado con distintos colores. Las etiquetas HTML se ven en azul, los signos de menor y mayor que en gris, y el texto dentro de las etiquetas en blanco. En JavaScript, las variables toman color aguamarina y los textos entre comillas aparecen en rojo.
Estos colores son arbitrarios y no afectan al código en absoluto. Son una ayuda visual para ti, no para el navegador. Si dejas una etiqueta abierta sin cerrar, VS Code la marcará en rojo para que detectes el error rápido.
¿Para qué sirven los colores en un editor de código? Son una guía visual que ayuda al programador a identificar errores, distinguir tipos de elementos y leer el código más rápido. El navegador los ignora por completo.
Otra ventaja: cuando abres una etiqueta como <p>, VS Code crea automáticamente la etiqueta de cierre </p>. Pequeñas ayudas que aceleran tu trabajo.
Cómo configurar UTF-8 para usar tildes y eñes en HTML
Al recargar tu página, probablemente verás caracteres extraños donde deberían estar las tildes. Esto pasa porque el navegador no sabe qué codificación de caracteres usar. La solución es agregar la etiqueta meta con el atributo charset.
Dentro de la etiqueta head, justo al inicio, escribe:
html
<meta charset="UTF-8" />
Esta etiqueta se cierra de forma diferente porque no tiene contenido interno, a diferencia de <title> que sí lleva texto adentro y se cierra con </title>. Las etiquetas sin contenido se cierran con un slash antes del signo mayor que.
Qué son los atributos en HTML
El espacio entre meta y charset es obligatorio, y charset="UTF-8" se llama atributo. Los atributos dan información extra a la etiqueta sobre cómo comportarse.
- charset: define el conjunto de caracteres que usará la página.
- UTF-8: estándar internacional que incluye tildes, eñes y caracteres del español.
- meta: etiqueta que entrega metadatos al navegador sobre la página.
Guarda con Control + S, recarga el navegador y ahora la palabra código aparecerá con su tilde correcta. Con esto ya tienes tu entorno listo para empezar a programar de verdad.
¿Qué editor de código vas a probar primero y por qué? Cuéntame en los comentarios.
