Si los editores de texto fueran cocineros, VSCode sería el chef con estrellas Michelín que también friega los platos por ti.
Imagina que eres uno de esos tipos a los que les gusta llegar al final por el camino más rápido. Imagina, además, que quieres escribir "hola mundo" en un trozo de papel.
Como eres un tipo seguro de sus posibilidades, has decidido que escribir en el papel utilizando un lápiz y apoyándote en una superficie plana y limpia es cosa de perdedores, que está sobrevalorado, así que vas a hacerlo como se hacía en la prehistoria: usando una rama y apoyándote en el suelo.
Tal como rompes hoja tras hoja y tu autoestima es esfuma, comienzas a pensar que quizás lo de apoyarte en una superficie plana no fuese tan mala idea.
Basta de símiles. El individuo rascando un papel con una rama en el suelo es el programador que escribe programas con un editor de texto como el bloc de notas (o vim, si es muy friki y no aspira a encontrar pareja jamás): Se puede, sí, pero no porque se pueda es el método óptimo.
Escribir código en un editor cutre se hacía en los 90 porque en esos años oscuros no había otra solución... hasta que alguien inventó el IDE, o Integrated Development Environment, o entorno de desarrollo integrado, y todo cambió para mejor.
Dicho muy rápidamente, un IDE es una aplicación que nos permite desarrollar código de un modo rápido, cómodo y fiable. Siguiendo con el ejemplo de la rama, el IDE es una mesa, lisa y limpia, donde poder apoyar el papel en el que vamos a escribir "hola mundo".
Y Microsoft Visual Studio Code, comúnmente conocido como VSCode, es el IDE gratuito que vamos a utilizar en este curso para desarrollar código en JS.
Instalando VSCode
No mucho que decir sobre cómo instalar VSCode, principalmente porque el método de instalación varía dependiendo de la plataforma (Windows/Línux/MacOS). Simplemente accede al sitio de la aplicación, descárgalo e instálalo.
Una vez instalado, la primera vez que se ejecuta VSCode suele mostrar un asistente para configurar algunas de las características que se utilizarán y que van cambiando de versión en versión, por lo que no voy a abordar esa parte. Lo más importante al respecto es que, para comenzar a programar en JS, no hace falta instalar ninguna extensión de lenguajes de programación: VSCode soporta JS nativamente.
Puesto que este curso se ha escrito en castellano, vamos a configurar VSCode también en castellano. Todas las funcionalidades que se pueden añadir a VSCode, y no son pocas, se gestionan a través del menú de extensiones (5º icono en la barra lateraz izquierda, o atajos de teclado Ctrl+Mayúsculas+X en Windows/Línux o Cmd+Mayúsculas+X en MacOS).
Una vez abierto el panel de extensiones, teclea "spanish language pack" en la casilla de búsqueda de extensiones tal como muestra el siguiente vídeo y pulsa el botón "Install". Una vez instalada la extensión, aplica los cambios para que VSCode se reinicie en castellano.
El primer programa con VSCode
A modo de ejemplo sobre cómo utilizar VSCode, vamos a crear un trozo de código muy simple que posteriormente utilizaremos en la tercera parte de este capítulo.
Habíamos dicho antes que VSCode es un IDE (Integrated Development Environment, o entorno de desarrollo integrado). En esencia, un IDE es un editor de texto que integra ciertas funcionalidades adicionales que facilitan el desarrollo de código. En lugar de soltar un rollo sobre qué funcionalides tiene y deja de tener VSCode, vamos a ir descubríendolas tal como vamos a ir usándolo.
Para comenzar, y para tener el código lo más organizado posible, recomiendo crear en el directorio de documentos un subdirectorio para almacenar el código a desarrollar. Su nombre es cuestión de gustos, yo suelo llamar a mis subdirectorios de desarrollo dev (de "development").
Se llame así o de otro modo, debemos crear una jerarquía de directorios similar a la mostrada para poder almacenar ordenadamente el código que vamos a generar en el curso:
// Jeararquía de directorios sugerida
dev
|_ js
|_ aprendiendo-JS
|_ 01
|_ holaMundo
Una vez creada la estructura de directorios, abriremos el directorio holaMundo desde VSCode y crearemos un archivo llamado index.js. Este archivo va a contener el código de nuestro primer programa.
A continuación, añadiremos el siguiente contenido al archivo index.js:
// Primer programa en JS: hola mundo
console.log("Hola, mundo!")
El proceso completo se muestra en el vídeo siguiente:
En el vídeo, además, puedes observar una de las funcionalidades claves de los IDE: el syntax highlight o resaltado de sintaxis, que aplica distintos colores y estilos al código dependiendo de su naturaleza. En el ejemplo, la primera línea es un comentario que se muestra en gris y cursiva, mientras la segunda línea es una función que se muestra en azul, con el primer argumento (una cadena de texto) en verde.
Objetivos conseguidos
En este capítulo has aprendido qué es VSCode y para qué sirve. Has podido instalarlo en tu equipo y, además, instalar la primera extensión que permite cambiar el interfaz de VSCode de inglés a castellano. Finalmente, has creado tu primer programa y has descubierto una de las funcionalidades ofrecidas por los IDEs, el syntax highlight.
Próximos pasos
Desafortunadamente no hemos podido ejecutar el programa creado. Para hacerlo necesitamos, además del código en JS, un runtime que lo ejecute, y ese no es otro que Node.JS.
En el póximo capítulo, Node.JS, aprenderemos a instalar y utilizar este runtime.