Ir al contenido principal

Visual Studio Code (VSCode)

VSCode actúa en el escenario principal de cualquier festival de música. El resto de editores no están ni en cartel.

Imagina que eres de los que prefieren llegar al resultado de la forma más directa posible. Ahora piensa que quieres escribir "hola mundo" en un papel.

Decides que usar un lápiz sobre una mesa es demasiado convencional y aburrido, así que pruebas con un palo sobre el suelo, como en la época de las cavernas.

Tras romper hoja tras hoja y perder la paciencia, se te ocurre que quizá aquello de usar una superficie estable no era tan mala idea después de todo.

Dejando de lado la metáfora: ese cavernícola escribiendo con una rama representa al programador que trabaja en editores básicos como el bloc de notas (o vim, si es un entusiasta empedernido sin vida social). ¿Funciona? Sí. ¿Es lo recomendable? No.

Antes, en los 90, no había otra opción… hasta que surgió el IDE (Integrated Development Environment o entorno de desarrollo integrado) y todo se volvió más fácil y productivo.

En pocas palabras, un IDE es una aplicación que facilita la escritura de código de manera más rápida, ordenada y confiable. Siguiendo el ejemplo, el IDE sería esa mesa limpia y plana donde apoyamos nuestro papel para escribir "hola mundo".

Y ese IDE que utilizaremos en este curso es Microsoft Visual Studio Code, o VSCode, una herramienta gratuita y muy completa para desarrollar en Node.JS.

Índice

  1. Cómo instalar VSCode
  2. Tu primer programa con VSCode
  3. Lo que hemos conseguido
  4. Qué viene a continuación

Cómo instalar VSCode

Instalar VSCode no tiene mucho misterio: el procedimiento cambia según uses Windows, Linux o macOS. Solo tienes que ir a su página oficial, descargarlo e instalarlo.

Al abrirlo por primera vez, normalmente muestra un asistente de configuración que cambia según la versión, por lo que no entraremos en detalle aquí. Lo importante es que, para empezar a programar en Node.JS, no necesitas instalar ningún complemento adicional: VSCode ya soporta Node.JS desde el inicio.

Como el curso está en castellano, configuraremos también VSCode en este idioma. Todas las extensiones, incluidas las de idiomas, se instalan desde el menú de extensiones (icono número 5 en la barra lateral izquierda, o con los atajos Ctrl+Shift+X en Windows/Linux y Cmd+Shift+X en macOS).

Una vez abierto el panel, busca "spanish language pack" en la barra de búsqueda de extensiones, pulsa "Install" y aplica los cambios para que el editor se reinicie en castellano.

Tu primer programa con VSCode

Para probar VSCode vamos a crear un pequeño ejemplo que usaremos de nuevo en la tercera parte de este capítulo.

Como comentamos, un IDE es básicamente un editor con muchas herramientas extra que facilitan el desarrollo. En lugar de contarte todo lo que hace VSCode, iremos descubriendo sus funciones mientras lo utilizamos.

Para organizarnos mejor, te recomiendo crear dentro de tu carpeta de documentos un directorio para el código del curso. El nombre lo eliges tú, yo suelo usar dev (abreviatura de "development").

Deberías tener una estructura de directorios similar a la siguiente:

// Estructura de directorios sugerida
  dev
  |_ node
     |_ aprendiendo-node
        |_ 01
           |_ holaMundo
  

Ahora abre la carpeta holaMundo desde VSCode y crea un archivo llamado index.js. Ese archivo contendrá nuestro primer programa.

Copia dentro el siguiente código:

// Primer programa en JS: hola mundo
console.log("Hola, mundo!")

Aquí tienes un vídeo con todo el proceso:

En él puedes ver otra de las grandes ventajas de los IDE: el syntax highlighting, o resaltado de sintaxis, que aplica colores distintos a cada parte del código. Por ejemplo, el comentario se muestra en gris y cursiva, mientras que la función aparece en azul y la cadena de texto en verde.

Lo que hemos conseguido

En este capítulo aprendiste qué es VSCode y cómo se utiliza. Lo instalaste en tu equipo, configuraste el idioma en castellano e incluso creaste tu primer programa. También conociste una de las funciones esenciales de cualquier IDE: el resaltado de sintaxis.

Qué viene a continuación

Ahora que ya tienes el runtime preparado, podemos comenzar a ejecutar nuestros primeros programas. En el siguiente capítulo aprenderás a crear un pequeño ejemplo: el tradicional Hola Mundo con Node.JS.