Hasta ahora tu código vivía en la consola del navegador o en un archivo .html suelto. Funcionó para empezar, pero no aguanta lo que viene. Es momento de instalar Visual Studio Code y Node.js, las dos herramientas que convierten tu código desechable en un proyecto real, organizado y persistente.
¿Qué es un editor de código profesional y por qué usar VS Code?
Un editor de código profesional es, en palabras simples, un bloc de notas con esteroides. Te ayuda a escribir más rápido, te avisa cuando hay errores, organiza tus archivos y te deja correr tu código sin salir de la ventana.
El que vas a usar se llama Visual Studio Code (o VS Code) y es el editor más usado por desarrolladores en el mundo en este momento [2:00]. Es gratuito, funciona en Windows y Mac, y tiene un ecosistema enorme de extensiones que lo vuelven aún más potente.
¿Qué es Visual Studio Code? Es un editor de código gratuito desarrollado por Microsoft que te permite escribir, organizar y ejecutar código en muchos lenguajes. Es el editor más popular entre desarrolladores hoy.
¿Cómo instalo VS Code paso a paso?
Entra a code.visualstudio.com. La página detecta tu sistema operativo y te ofrece la descarga correcta automáticamente.
- Da clic en el botón de descarga que aparece para tu sistema.
- Si la descarga no inicia sola, usa el link de descarga directa.
- Abre el archivo ejecutable que aparece en tus descargas.
- Sigue los pasos del instalador hasta finalizar.
El proceso en Mac es muy similar y igual de sencillo.
¿Qué es Node.js y por qué lo necesitas?
Aquí viene un paso que parece raro pero es clave. JavaScript fue diseñado para correr dentro del navegador. Por eso, cuando abrías la consola de Chrome, todo funcionaba: el navegador entiende JavaScript de manera nativa.
Pero a partir de ahora vas a escribir JavaScript en archivos que viven en tu computador, fuera del navegador. ¿Y cómo los ejecutas? Con un programa llamado Node, que es básicamente JavaScript fuera del navegador [3:30].
¿Qué es Node.js? Es un motor que le permite a tu computador ejecutar JavaScript sin abrir un navegador. Piensa en él como el motor que enciende tu código fuera de Chrome.
¿Cómo instalo Node.js en mi computador?
Ve a nodejs.org y descarga la versión para tu sistema operativo. En Windows, el botón es Windows Installer. Abre el instalador, acepta los permisos de administrador y deja que se acople con tu sistema operativo.
No te preocupes por entender Node a profundidad ahora. Más adelante lo retomamos.
¿Cómo creo mi primer proyecto en VS Code?
Al abrir VS Code por primera vez puede verse abrumador, pero solo necesitas ubicar tres zonas que importan.
- Explorador de archivos a la izquierda: ahí viven tus carpetas y archivos.
- Editor en el centro: el espacio donde escribes el código.
- Terminal abajo: una consola que interactúa directo con tu sistema operativo.
Vamos a crear el primer proyecto. Ve al escritorio, da clic derecho, crea una nueva carpeta y llámala Okini. Ábrela desde VS Code con la opción abrir carpeta. Dentro, crea un nuevo archivo y nómbralo prueba.js.
La extensión .js es una instrucción: le dice al editor que ese archivo contiene JavaScript. Es lo mismo que hiciste cuando renombraste un archivo a .html para que el navegador lo interpretara como página web.
¿Qué es Code Runner y cómo lo instalo?
VS Code de fábrica ya es bueno, pero las extensiones lo vuelven más potente. Por ahora vas a instalar una sola.
Ve al menú izquierdo, busca el botón de Extensiones y escribe Code Runner. Esta extensión te permite ejecutar tu código con un solo clic sin salir del editor [6:00]. Instálala y listo.
¿Cómo ejecuto mi primer archivo JavaScript fuera del navegador?
Dentro de prueba.js, escribe:
javascript
console.log("Bienvenida a Okini");
El comando console.log es la versión escrita en archivo de lo que en la consola del navegador era simplemente escribir y darle enter. Le dice al programa: imprime esto.
Dale clic al botón de Code Runner y mira la terminal: ahí aparece Bienvenida a Okini. Ese mensaje no salió de una consola dentro de Chrome, salió de un archivo que vive en tu computador [7:30].
¿Para qué sirve console.log en JavaScript? Sirve para imprimir valores o mensajes en la consola o terminal. Es la herramienta más usada para verificar qué está haciendo tu código.
Lo que ya tienes instalado y por qué importa
Pausa un segundo y mírate desde afuera. En menos de 10 minutos ganaste:
- Un editor profesional instalado.
- Un motor que ejecuta JavaScript fuera del navegador.
- Una extensión que corre tu código con un clic.
- Una carpeta de proyecto y un archivo
.js.
- Tu primer mensaje impreso desde tu propio computador.
Y lo mejor: todo lo que aprendiste en la consola del navegador sigue siendo válido. Las instrucciones, las variables, los efectos. La sintaxis es la misma, el lenguaje es el mismo. Lo único distinto es que ahora tu código persiste y se organiza.
En la próxima clase entras al corazón del curso: el vocabulario del pensamiento computacional. Cinco palabras que te van a servir para leer cualquier código y para pedirle a una inteligencia artificial lo que necesites con precisión. La primera ya la usaste sin saberlo: las variables.
¿Lograste imprimir tu primer mensaje desde VS Code? Cuéntame en los comentarios cómo te fue con la instalación.
