Visual Studio Code es un entorno de desarrollo integrado (IDE, integrated development environment) por el que se decantan muchos programadores, que aprecian su amplia gama de funciones y su herencia de código abierto. Visual Studio Code hace que programar sea más fácil, más rápido y menos frustrante. Esto es especialmente cierto cuando se trata de TypeScript, uno de los múltiples lenguajes soportados por el IDE.

Funciones como el completado de código, las sugerencias de parámetros y el resaltado de sintaxis contribuyen en gran medida a que los desarrolladores de TypeScript sean más productivos en Visual Studio Code. También incorpora un depurador de Node.js y la posibilidad de convertir el código en JavaScript ejecutable desde el editor. Sin embargo, la mayoría de estas funciones deben configurarse para un uso óptimo.

Cómo configurar Visual Studio Code para el desarrollo de TypeScript

Este tutorial paso a paso muestra cómo configurar Visual Studio Code para el desarrollo de TypeScript. Inicializamos un proyecto Node.js en TypeScript, escribimos algo de código, y luego compilamos, ejecutamos y depuramos el TypeScript — todo en Visual Studio Code.

Requisitos previos

Antes de empezar, asegúrate de que tienes

Necesitas Node.js y npm (el gestor de paquetes de Node) para construir tu proyecto TypeScript. Puedes verificar que Node.js está instalado en tu máquina con el siguiente comando de terminal:

node -v

Que debería devolver la versión de Node.js en tu máquina de la siguiente manera:

v21.6.1

¡Ahora empecemos con TypeScript en Visual Studio Code!

Instala el compilador de TypeScript

Visual Studio Code soporta el desarrollo de TypeScript pero no incluye el compilador de TypeScript. Dado que el compilador de TypeScript, tsc, transforma — o transpila — el código TypeScript a JavaScript, es un requisito para probar tu código TypeScript. En otras palabras, tsc toma código TypeScript como entrada y produce código JavaScript como salida, y luego puedes ejecutar el código JavaScript con Node.js o en un navegador Web.

Ejecuta el siguiente comando en tu terminal para instalar el compilador TypeScript globalmente en tu ordenador:

npm install -g typescript

Verifica la versión instalada de tsc:

tsc --version

Si este comando no devuelve un error, tsc está disponible. ¡Ya tienes todo lo que necesitas para crear un proyecto TypeScript!

Crear un proyecto TypeScript

Vamos a crear un sencillo proyecto TypeScript Node.js llamado hello-world. Abre tu terminal, y crea una carpeta para tu proyecto:

mkdir hello-world
cd hello-world

Dentro de hello-world, inicializa un proyecto con el siguiente comando npm:

npm init -y

Esto crea un archivo de configuración package.json para tu proyecto Node.js. ¡Es hora de ver en qué consiste el proyecto en Visual Studio Code!

Inicia Visual Studio Code y selecciona Archivo > Abrir carpeta…

En la ventana que aparece, selecciona la carpeta del proyecto hello-world y haz clic en Abrir. Tu proyecto debería tener este aspecto:

Captura de pantalla de Visual Studio Code con un proyecto abierto.
El proyecto Node.js TypeScript abierto en Visual Studio Code.

Actualmente, el proyecto sólo consta del archivo package.json inicializado por npm init.

Selecciona Ver > Terminal en el menú de Visual Studio Code para acceder al terminal integrado del editor. Allí, ejecuta el siguiente comando:

npx tsc --init

Esto inicializa un archivo de configuración de TypeScript llamado tsconfig.json en el directorio del proyecto.

El archivo tsconfig.json te permite personalizar el comportamiento del compilador de TypeScript. En concreto, proporciona al compilador de TypeScript instrucciones para transpilar el código TypeScript. Sin él, tsc no podrá compilar tu proyecto Typescript como te gustaría.

Abre tsconfig.json en Visual Studio Code, y verás que contiene un comentario para cada opción de configuración disponible. Queremos que nuestro archivo tsconfig.json incluya estas opciones:

{
  "compilerOptions": {
    "target": "es2016",
    "module": "commonjs",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true,
    "sourceMap": true,
    "outDir": "./build"
  }
}

Es probable que las únicas diferencias que veas entre las opciones anteriores sean la habilitación de la asignación de fuentes para el JavaScript que vas a generar y la adición de un directorio de salida:

    "sourceMap": true,
    "outDir": "./build"

Realiza esos cambios en tu archivo tsconfig.json.

El mapeo de código fuente es necesario para el compilador Visual Studio Code.

La configuración outDir define dónde coloca el compilador los archivos transpilados. Por defecto, es la carpeta raíz del proyecto. Para evitar llenar la carpeta del proyecto con archivos de construcción en cada compilación, establécela en otra carpeta, como build.

Tu proyecto TypeScript está casi listo para ser compilado. Pero primero, necesitas código TypeScript.

Haz clic con el botón derecho del ratón en la sección Explorador y selecciona Nuevo archivo… Escribe index.ts y pulsa Intro. Tu proyecto contendrá ahora un archivo TypeScript llamado index.ts:

Captura de pantalla de Visual Studio Code mostrando un archivo TypeScript vacío.
El archivo index.ts en blanco en Visual Studio Code.

Empecemos con el siguiente código TypeScript:

const message: string = "Hello, World!"
console.log(message)

Este fragmento simplemente imprime el conocido mensaje ¡Hello, World!

Prueba IntelliSense para completar el código

Cuando escribías las líneas anteriores en Visual Studio Code, puede que hayas notado algunas sugerencias de código hechas por el editor. Esto ocurre gracias a IntelliSense, una de las geniales funciones de Visual Studio Code.

IntelliSense incluye funciones como completado de código, información de documentos e información de parámetros en las funciones. IntelliSense sugiere automáticamente cómo completar el código mientras escribes, lo que puede mejorar significativamente tu productividad y precisión. Puedes verlo en acción aquí:

Animación que muestra la función IntelliSense de Visual Studio Code en acción.
El reconocimiento de código IntelliSense de Visual Studio Code en acción.

Ten en cuenta que Visual Studio Code viene de fábrica con soporte IntelliSense para proyectos TypeScript. No tienes que configurarlo manualmente.

Ahora que sabes cómo escribir TypeScript como un profesional en Visual Studio Code, vamos a compilarlo y ver si funciona.

Compilar TypeScript en Visual Studio Code

Abre el terminal integrado en Visual Studio Code y ejecuta

tsc -p .

Esto transpila todos los archivos TypeScript del proyecto a JavaScript. El -p . indica al compilador que utilice el archivo tsconfig.json situado en el directorio actual. El resultado — en este caso, index.js y el mapa fuente index.js.map — se colocan en el directorio ./build.

Puedes confirmar que el código JavaScript transpilado funciona con este comando en el terminal:

node ./build/index.js

Node.js interpretará index.js e imprimirá en el terminal:

Hello, World!

Un método alternativo para iniciar el transpilador es seleccionar Terminal > Ejecutar tarea de compilación… en el menú Código de Visual Studio y hacer clic en la opción tsc: build – tsconfig.json.

Captura de pantalla de la entrada del menú Código de Visual Studio para iniciar el proceso de construcción.
Iniciar el proceso de construcción utilizando los menús de Visual Studio Code.

Esta operación ejecuta tsc -p . en segundo plano y construye tu código directamente en el editor.

Y así es como se compila tu proyecto TypeScript en Visual Studio Code. Ahora sólo tienes que averiguar cómo ejecutar y depurar tu código.

Ejecutar y depurar TypeScript en Visual Studio Code

Visual Studio Code soporta la depuración de TypeScript gracias a su depurador Node.js incorporado. Pero antes de poder utilizarlo, tienes que configurarlo. Haz clic en el icono Ejecutar y Depurar de la barra lateral, haz clic en Crear un archivo launch.json y selecciona Node.js.

Captura de pantalla que muestra la selección del depurador de Node.js.
Seleccionando el depurador Node.js para la configuración de launch.json.

Esto crea un archivo launch.json de Node.js por defecto, que es el archivo de configuración que el depurador de Visual Studio Code utiliza para lanzar y depurar una aplicación. Este archivo de configuración especifica cómo lanzar la aplicación, los argumentos de la línea de comandos a utilizar y las variables de entorno a establecer.

Como puedes ver en la sección Explorador, launch.json se encuentra en la carpeta .vscode de un proyecto.

Abre ese archivo y edítalo como se indica a continuación:

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "skipFiles": [
                "node_modules/**"
            ],
            "program": "${workspaceFolder}/index.ts",
            "preLaunchTask": "tsc: build - tsconfig.json",
            "outFiles": ["${workspaceFolder}/build/**/*.js"]
        }
    ]
}

Ajusta las opciones program, preLaunchTask, y outFiles, teniendo en cuenta que:

  • program: Especifica la ruta al punto de entrada de la aplicación a depurar. En TypeScript, debe contener el archivo principal a ejecutar al lanzar la aplicación.
  • preLaunchTask: Define el nombre de la tarea de construcción de Visual Studio Code que se ejecutará antes de lanzar la aplicación. En un proyecto TypeScript, debe ser la tarea de construcción.
  • outFiles: Contiene la ruta a los archivos JavaScript transpilados generados por el proceso de construcción. Los archivos de mapa de código fuente generados por tsc gracias a la configuración de "sourceMap": true son utilizados por el depurador para mapear el código fuente TypeScript con el código JavaScript generado. Esto te permite depurar directamente el código TypeScript.

Guarda el archivo launch.json y abre index.ts. Haz clic en el espacio en blanco antes de la línea console.log() para establecer un punto de interrupción. Aparecerá un punto rojo junto a la línea, algo parecido a esto:

Captura de pantalla que muestra la adición de un punto de interrupción de depuración.
El punto rojo marca un punto de interrupción de depuración.

Cuando ejecutes el código con el compilador, la ejecución se detendrá ahí. Gracias a este punto de interrupción, puedes verificar que el depurador de Node.js en Visual Studio Code funciona como se espera.

Visita de nuevo la sección Ejecutar y Depurar y haz clic en el botón verde de reproducción para ejecutar el depurador. Espera a que se ejecute preLaunchTask. Una vez compilado el código, el programa se inicia y la ejecución se detiene en el punto de interrupción establecido anteriormente.

Captura de pantalla que muestra el depurador de código de Visual Studio en acción.
El depurador de código de Visual Studio en acción.

A la izquierda de la imagen anterior, puedes ver los valores de las variables en el momento de la pausa. También puedes pausar, avanzar paso a paso, entrar/salir, reiniciar y detener, como se describe en la documentación de depuración de Visual Studio Code.

Pulsa F5 para reanudar la ejecución, y deberías ver el siguiente mensaje en la pestaña Consola de Depuración:

Hello, World!

Esto es lo que esperas que produzca la aplicación, y significa que el programa se ha ejecutado correctamente.

Acabas de aprender a configurar Visual Studio Code para la programación TypeScript. El tutorial podría terminar aquí, pero hay una cosa más importante que aprender: cómo configurar una extensión en Visual Studio Code que puede hacer que escribir código de calidad en TypeScript sea aún más fácil.

Cómo configurar ESLint en Visual Studio Code

Puedes ampliar el core de Visual Studio Code utilizando extensiones. Éstas proporcionan características y funcionalidades adicionales para el editor de código.

Una de las extensiones más populares de Visual Studio Code para el desarrollo de TypeScript es la extensión ESLint.

ESLint es una popular herramienta de análisis estático de código para JavaScript y TypeScript que ayuda a los desarrolladores a identificar y corregir errores comunes de programación y a hacer cumplir las normas de programación. La extensión ejecuta ESLint directamente dentro del editor.

Vamos a integrar ESLint en Visual Studio Code en tu proyecto TypeScript.

Primero, inicializa ESLint en tu proyecto con este comando de terminal:

npm init @eslint/config

Durante el proceso de configuración, se te harán algunas preguntas para ayudarte a generar el archivo de configuración de ESLint. Puedes responder como se indica a continuación:

√ How would you like to use ESLint? · style
√ What type of modules does your project use? · commonjs
√ Which framework does your project use? · none
√ Does your project use TypeScript? · Yes
√ Where does your code run? · browser
√ How would you like to define a style for your project? · guide
√ Which style guide do you want to follow? · standard-with-typescript
√ What format do you want your config file to be in? · JSON

El instalador comprobará las dependencias y te preguntará si quieres instalar algún paquete que falte. Puedes responder así:

√ Would you like to install them now? · Yes
√ Which package manager do you want to use? · npm

Al final del proceso, encontrarás un nuevo archivo .eslintrc.json que contiene el siguiente código inicial:

{
    "env": {
        "browser": true,
        "commonjs": true,
        "es2021": true
    },
    "extends": "standard-with-typescript",
    "overrides": [
    ],
    "parserOptions": {
        "ecmaVersion": "latest"
    },
    "rules": {
    }
}

El archivo .eslintrc.json contiene la configuración utilizada por ESLint para aplicar normas específicas de código, estilo y calidad. Este es el aspecto que puede tener un archivo .eslintrc.json básico para un proyecto Node.js TypeScript:

{
    "env": {
        "browser": true,
        "commonjs": true,
        "es2021": true,
        // enable node support
        "node": true
    },
    "extends": "standard-with-typescript",
    "overrides": [
    ],
    "parserOptions": {
        "ecmaVersion": "latest",
        "project": "tsconfig.json"
    },
    "rules": {
        // force the code to be indented with 2 spaces
        "indent": ["error", 2],
        // mark extra spaces as errors
        "no-multi-spaces": ["error"]
    }
}

Ahora es el momento de instalar la extensión ESLint en Visual Studio Code. Haz clic en el icono Extensiones del menú de la izquierda y escribe ESLint. Busca la extensión ESLint y haz clic en Instalar.

Captura de pantalla que muestra ESLint en el mercado de extensiones de Visual Studio Code.
Instalación de la extensión ESLint en Visual Studio Code.

Para que la extensión ESLint inspeccione automáticamente tus archivos TypeScript en cada guardado, crea un archivo settings.json dentro de .vscode con el siguiente contenido:

{
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
      },
      "eslint.validate": [
        "typescript"
      ],
      "eslint.codeActionsOnSave.rules": null
}

El archivo settings.json contiene la configuración utilizada por Visual Studio Code para personalizar el comportamiento del editor y sus extensiones.

Reinicia Visual Studio Code para que el editor cargue la nueva extensión y configuraciones.

Si abres index.ts y editas el código, verás nuevos errores informados por el IDE. Para los errores de estilo de código, guarda el archivo, y ESLint reformateará automáticamente el código según lo definido en .eslintrc.json.

Una animación que muestra la ejecución de ESLint en Visual Studio Code.
ESLint en acción dentro de Visual Studio Code.

Ahora, ¡nada puede impedirte escribir código de calidad! Todo lo que queda es desplegar tu aplicación Node.js en un servicio moderno de alojamiento en la nube como el de Kinsta.

Resumen

Por tanto, configurar Visual Studio Code para el desarrollo en TypeScript es bastante sencillo: acabas de aprender a crear un proyecto Node.js en TypeScript, cargarlo en Visual Studio Code y utilizar el IDE para escribir código asistido por IntelliSense. También has configurado el compilador de TypeScript, has configurado el compilador de Node.js para depurar código TypeScript, y has integrado ESLint en el proyecto.

Si quieres llevar el desarrollo de tu aplicación web al siguiente nivel, explora los servicios de Alojamiento de Aplicaciones Web y Alojamiento de Bases de Datos Administradas de Kinsta. Kinsta ofrece una gama de soluciones de alojamiento optimizadas para la velocidad, la seguridad y la escalabilidad, proporcionando un gran entorno para construir y desplegar aplicaciones de alto rendimiento.

Antonello Zanini

Antonello is a software engineer, but prefers to call himself a Technology Bishop. Spreading knowledge through writing is his mission.