¿Por qué VS Code y no otro editor?
Hay muchas opciones disponibles: Sublime Text, Atom (ya descontinuado), Notepad++, PyCharm, WebStorm. Cada una tiene sus ventajas, pero VS Code ganó la batalla por tres razones concretas: es completamente gratuito y de código abierto, tiene una comunidad enorme que produce extensiones para prácticamente cualquier lenguaje y tarea, y su rendimiento es muy bueno incluso en computadoras con recursos limitados.
Para alguien que está aprendiendo, eso se traduce en una ventaja práctica: cuando busques ayuda en YouTube, foros o comunidades como Stack Overflow, la mayoría de los tutoriales van a usar VS Code. Seguir el mismo entorno que el resto facilita enormemente el aprendizaje.
Cómo instalarlo
La instalación es sencilla y gratuita. Entra a code.visualstudio.com, descarga el instalador para tu sistema operativo (Windows, macOS o Linux) y ejecútalo. En Windows el proceso toma menos de dos minutos. Una recomendación durante la instalación: marca la opción "Agregar al PATH" si aparece, y también "Abrir con Code" en el menú contextual del explorador de archivos. Esas dos opciones te ahorrarán tiempo en el día a día.
Al abrir VS Code por primera vez verás una pantalla de bienvenida. Puedes cerrarla sin problema. Lo primero que vas a querer hacer es ajustar tres cosas básicas antes de escribir una sola línea de código.
Configuración esencial desde el primer día
Lo primero es el tema visual. VS Code trae por defecto un tema oscuro llamado "Dark+", que es perfectamente usable. Si prefieres fondo claro, puedes cambiarlo desde Archivo > Preferencias > Tema de color. Para programadores que pasan muchas horas frente a la pantalla, los temas oscuros suelen ser más cómodos, pero esto es completamente personal.
Lo segundo es el tamaño de fuente y la fuente en sí. Ve a Archivo > Preferencias > Configuración y busca "font size". El valor por defecto es 14, pero muchos desarrolladores lo suben a 15 o 16 para reducir la fatiga visual. También vale la pena instalar la fuente "Fira Code" o "JetBrains Mono", que son fuentes diseñadas específicamente para código y tienen una característica llamada ligaduras: combinan símbolos como => o !== en un solo carácter visual, haciendo el código más fácil de leer.
Lo tercero es activar el guardado automático. Busca "auto save" en la configuración y cámbialo a "afterDelay". Esto hace que VS Code guarde automáticamente tus archivos después de un pequeño retraso, evitando que pierdas cambios si cierras la ventana sin acordarte de guardar. Para principiantes, esta opción es casi obligatoria.
Las extensiones imprescindibles
Las extensiones son la razón por la que VS Code es tan poderoso. Se instalan desde el panel lateral izquierdo, en el ícono que parece cuatro cuadrados. Aquí están las que recomendamos para alguien que está aprendiendo desarrollo web y Python:
Prettier - Code Formatter es la extensión de formateo de código más popular. Cada vez que guardas un archivo, Prettier reorganiza automáticamente tu código para que siga convenciones de estilo consistentes: indentación correcta, comillas uniformes, espacios en los lugares adecuados. Para un principiante, esto es muy útil porque te va enseñando indirectamente cómo debe verse el código bien escrito.
ESLint analiza tu código JavaScript en tiempo real y te señala errores potenciales antes de que los ejecutes. Verás líneas subrayadas en rojo o amarillo con explicaciones de qué está mal. Es como tener un revisor automático que detecta problemas comunes como variables declaradas pero nunca usadas, o condiciones que nunca se van a cumplir.
Python (la extensión oficial de Microsoft) es imprescindible si vas a trabajar con Python. Agrega resaltado de sintaxis avanzado, autocompletado inteligente, capacidad para ejecutar y depurar scripts directamente desde VS Code, y detección de errores en tiempo real. Sin esta extensión, VS Code trata los archivos .py como texto plano.
Live Server es una de las extensiones favoritas de quienes aprenden desarrollo web. Abre un servidor local en tu computadora y muestra tu página HTML en el navegador actualizándose automáticamente cada vez que guardas un cambio. Ya no tienes que cerrar y volver a abrir el navegador para ver el resultado de cada modificación: el cambio aparece en tiempo real.
HTML CSS Support mejora el autocompletado cuando escribes HTML y CSS. Sugiere nombres de clases, propiedades, atributos y valores, reduciendo los errores de tipografía que tanto frustran al principio.
GitLens extiende la integración de Git que ya trae VS Code por defecto. Muestra directamente en el editor quién modificó cada línea de código, cuándo y en qué commit. Para quienes están aprendiendo a usar control de versiones, esta extensión hace mucho más visible lo que está pasando con el historial del proyecto.
Un flujo de trabajo básico para empezar
Con VS Code instalado y las extensiones configuradas, un flujo de trabajo básico para un proyecto web se ve así: creas una carpeta nueva en tu computadora, la abres con VS Code usando Archivo > Abrir carpeta, creas un archivo index.html, escribes la estructura básica con la abreviatura ! seguida de Tab (Emmet, que viene incorporado en VS Code, genera el esqueleto HTML automáticamente), y activas Live Server haciendo clic derecho sobre el archivo y seleccionando "Open with Live Server". A partir de ahí, cada cambio que hagas se refleja instantáneamente en el navegador.
Para Python, el flujo es similar: creas un archivo main.py, escribes tu código, y lo ejecutas directamente con el botón de play que aparece en la esquina superior derecha al instalar la extensión de Python.
¿Y ahora qué?
VS Code tiene muchas más funcionalidades que vamos a ir explorando en próximos tutoriales: cómo usar el terminal integrado, cómo conectar Git y hacer tus primeros commits, cómo usar los snippets para escribir código más rápido, y cómo configurar entornos virtuales de Python directamente desde el editor.
Por ahora, con la instalación básica y las seis extensiones mencionadas tienes más que suficiente para trabajar cómodamente en tus primeros proyectos. El mejor consejo que podemos darte es simple: úsalo todos los días, aunque sea por veinte minutos. El editor se va volviendo cada vez más natural con el uso, y en pocas semanas lo estarás manejando sin pensar.
Publicar un comentario