Visual Studio Code est un environnement de développement intégré (IDE) apprécié par de nombreux programmeurs qui apprécient son large éventail de fonctionnalités et son héritage open source. Visual Studio Code rend le codage plus facile, plus rapide et moins frustrant. C’est particulièrement vrai lorsqu’il s’agit de TypeScript, l’un des nombreux langages pris en charge par l’IDE.

Des fonctionnalités telles que la complétion de code, les indications de paramètres et la coloration syntaxique contribuent largement à rendre les développeurs TypeScript plus productifs dans Visual Studio Code. Visual Studio Code est également doté d’un débogueur Node.js intégré et de la possibilité de convertir le code en JavaScript exécutable à partir de l’éditeur. Cependant, la plupart de ces fonctionnalités doivent être configurées pour une utilisation optimale.

Comment configurer Visual Studio Code pour le développement TypeScript ?

Ce tutoriel étape par étape montre comment configurer Visual Studio Code pour le développement TypeScript. Nous initialisons un projet Node.js en TypeScript, écrivons du code, puis compilons, exécutons et déboguons le TypeScript – le tout dans Visual Studio Code.

Pré-requis

Avant de commencer, assurez-vous d’avoir

Vous avez besoin de Node.js et de npm (le gestionnaire de paquets Node) pour construire votre projet TypeScript. Vous pouvez vérifier que Node.js est installé sur votre machine à l’aide de la commande de terminal suivante :

node -v

Vous devriez obtenir la version de Node.js sur votre machine comme suit :

v21.6.1

Commençons maintenant à utiliser TypeScript dans Visual Studio Code !

Installer le compilateur TypeScript

Visual Studio Code prend en charge le développement TypeScript mais n’inclut pas le compilateur TypeScript. Comme le compilateur TypeScript tsc transforme – ou transpose – le code TypeScript en JavaScript, il est indispensable pour tester votre code TypeScript. En d’autres termes, tsc prend du code TypeScript en entrée et produit du code JavaScript en sortie, puis vous pouvez exécuter le code JavaScript avec Node.js ou dans un navigateur Web.

Lancez la commande ci-dessous dans votre terminal pour installer globalement le compilateur TypeScript sur votre ordinateur :

npm install -g typescript

Vérifiez la version installée de tsc :

tsc --version

Si cette commande ne renvoie pas d’erreur, tsc est disponible. Vous avez maintenant tout ce qu’il faut pour construire un projet TypeScript !

Créer un projet TypeScript

Créons un projet TypeScript Node.js simple appelé hello-world. Ouvrez votre terminal et créez un dossier pour votre projet :

mkdir hello-world
cd hello-world

Dans hello-world, initialisez un projet avec la commande npm suivante :

npm init -y

Cela crée un fichier de configuration package.json pour votre projet Node.js. Il est temps de voir en quoi consiste le projet dans Visual Studio Code !

Lancez Visual Studio Code et sélectionnez File > Open Folder…

Dans la fenêtre qui s’affiche, sélectionnez le dossier du projet hello-world et cliquez sur Open. Votre projet devrait ressembler à ceci :

Le projet Node.js TypeScript ouvert dans Visual Studio Code.
Le projet Node.js TypeScript ouvert dans Visual Studio Code.

Actuellement, le projet se compose uniquement du fichier package.json initialisé par npm init.

Sélectionnez View > Terminal dans le menu Visual Studio Code pour accéder au terminal intégré de l’éditeur. Exécutez la commande suivante :

npx tsc --init

Cette commande initialise un fichier de configuration TypeScript nommé tsconfig.json dans le répertoire du projet.

Le fichier tsconfig.json vous permet de personnaliser le comportement du compilateur TypeScript. Plus précisément, il fournit au compilateur TypeScript des instructions pour la transposition du code TypeScript. Sans ce fichier, tsc ne sera pas en mesure de compiler votre projet TypeScript comme vous le souhaitez.

Ouvrez le fichier tsconfig.json dans Visual Studio Code, et vous remarquerez qu’il contient un commentaire pour chaque option de configuration disponible. Nous voulons que notre fichier tsconfig.json inclue ces options :

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

Il est probable que les seules différences que vous verrez entre les options ci-dessus soient l’activation du mappage des sources pour le JavaScript que vous allez générer et l’ajout d’un répertoire de sortie :

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

Apportez ces modifications à votre fichier tsconfig.json.

Le mappage des sources est requis par le compilateur Visual Studio Code.

Le fichier outDir définit l’endroit où le compilateur place les fichiers transposés. Par défaut, il s’agit du dossier racine du projet. Pour éviter de remplir le dossier du projet avec des fichiers de compilation à chaque compilation, choisissez un autre dossier, par exemple build.

Votre projet TypeScript est presque prêt à être compilé. Mais d’abord, vous avez besoin de code TypeScript.

Cliquez avec le bouton droit de la souris sur la section Explorer et sélectionnez Nouveau fichier… Tapez index.ts et appuyez sur Entrée. Votre projet contient désormais un fichier TypeScript appelé index.ts:

Le fichier index.ts vierge dans Visual Studio Code.
Le fichier index.ts vierge dans Visual Studio Code.

Commençons par le code TypeScript suivant :

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

Cet extrait imprime simplement le message bien connu Hello, World !

Essayer IntelliSense pour compléter le code

Lorsque vous avez écrit les lignes ci-dessus dans Visual Studio Code, vous avez peut-être remarqué quelques suggestions de code faites par l’éditeur. Cela est dû à IntelliSense, l’une des fonctions les plus intéressantes de Visual Studio Code.

IntelliSense comprend des fonctionnalités telles que la complétion de code, des informations sur la documentation et des informations sur les paramètres des fonctions. IntelliSense suggère automatiquement comment compléter le code au fur et à mesure que vous le tapez, ce qui peut améliorer considérablement votre productivité et votre précision. Vous pouvez le voir en action ici :

La reconnaissance de code IntelliSense de Visual Studio Code en action.
La reconnaissance de code IntelliSense de Visual Studio Code en action.

N’oubliez pas que Visual Studio Code est livré avec la prise en charge IntelliSense pour les projets TypeScript. Vous n’avez pas besoin de le configurer manuellement.

Maintenant que vous savez comment écrire TypeScript comme un pro dans Visual Studio Code, compilons-le et voyons s’il fonctionne.

Compiler TypeScript dans Visual Studio Code

Ouvrez le terminal intégré dans Visual Studio Code et exécutez :

tsc -p .

Cela transpose tous les fichiers TypeScript du projet en JavaScript. L’adresse -p . indique au compilateur d’utiliser le fichier tsconfig.json situé dans le répertoire courant. Le résultat – dans ce cas, index.js et la carte source index.js.map – est placé dans le répertoire ./build.

Vous pouvez confirmer que le code JavaScript transpilé fonctionne avec cette commande dans le terminal :

node ./build/index.js

Node.js interprétera index.js et l’imprimera dans le terminal :

Hello, World!

Une autre méthode pour lancer le transpileur consiste à sélectionner Terminal > Run Build Task… dans le menu Visual Studio Code et à cliquer sur l’option tsc : build – tsconfig.json.

Lancez le processus de construction à l'aide des menus de Visual Studio Code.
Lancez le processus de construction à l’aide des menus de Visual Studio Code.

Cette opération exécute tsc -p . dans les coulisses et construit votre code directement dans l’éditeur.

Voilà comment compiler votre projet TypeScript dans Visual Studio Code. Il ne vous reste plus qu’à trouver comment lancer et déboguer votre code.

Exécuter et déboguer TypeScript dans Visual Studio Code

Visual Studio Code prend en charge le débogage TypeScript grâce à son débogueur Node.js intégré. Mais avant de pouvoir l’utiliser, vous devez le configurer. Cliquez sur l’icône Exécuter et déboguer dans la barre latérale, cliquez sur Créer un fichier launch.json et sélectionnez Node.js.

Sélection du débogueur Node.js pour la configuration du fichier launch.json.
Sélection du débogueur Node.js pour la configuration du fichier launch.json.

Cela crée un fichier launch.j son Node.js par défaut, qui est le fichier de configuration que le débogueur Visual Studio Code utilise pour lancer et déboguer une application. Ce fichier de configuration indique comment lancer l’application, les arguments de ligne de commande à utiliser et les variables d’environnement à définir.

Comme vous pouvez le voir dans la section Explorer, launch.json est situé dans le dossier .vscode d’un projet.

Ouvrez ce fichier et modifiez-le comme suit :

{
    // 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"]
        }
    ]
}

Ajustez les options program, preLaunchTask, et outFiles, en tenant compte du fait que :

  • program : Spécifie le chemin vers le point d’entrée de l’application à déboguer. En TypeScript, il doit contenir le fichier principal à exécuter lors du lancement de l’application.
  • preLaunchTask : Définit le nom de la tâche de construction de Visual Studio Code à exécuter avant de lancer l’application. Dans un projet TypeScript, il doit s’agir de la tâche de construction.
  • outFiles : Contient le chemin d’accès aux fichiers JavaScript transpilés générés par le processus de construction. Les fichiers sources générés par tsc grâce à la configuration de "sourceMap": true sont utilisés par le débogueur pour faire correspondre le code source TypeScript au code JavaScript généré. Cela vous permet de déboguer directement le code TypeScript.

Sauvegardez le fichier launch.json et ouvrez index.ts. Cliquez sur l’espace vide avant la ligne console.log() pour définir un point de terminaison. Un point rouge apparait à côté de la ligne, comme suit :

Le point rouge marque un point de terminaison de débogage.
Le point rouge marque un point de terminaison de débogage.

Lorsque vous exécutez le code avec le compilateur, l’exécution s’arrête à cet endroit. Grâce à ce point d’arrêt, vous pouvez vérifier que le débogueur Node.js dans Visual Studio Code fonctionne comme prévu.

Visitez à nouveau la section Run and Debug et cliquez sur le bouton vert play pour lancer le débogueur. Attendez que preLaunchTask s’exécute. Une fois le code compilé, le programme se lance et l’exécution s’arrête au point de terminaison défini ci-dessus.

Le débogueur de Visual Studio Code en action.
Le débogueur de Visual Studio Code en action.

Sur la gauche de l’image ci-dessus, vous pouvez voir les valeurs des variables au moment de l’interruption. Vous pouvez également faire une pause, passer par-dessus, entrer/sortir, redémarrer et arrêter, comme décrit dans la documentation sur le débogage de Visual Studio Code.

Appuyez sur F5 pour reprendre l’exécution, et vous devriez voir le message suivant dans l’onglet Debug Console:

Hello, World!

C’est ce que vous attendez de l’application et cela signifie que le programme a été exécuté correctement.

Vous venez d’apprendre à configurer Visual Studio Code pour la programmation TypeScript. Le tutoriel pourrait s’arrêter là, mais il reste encore une chose importante à apprendre : comment configurer une extension dans Visual Studio Code qui peut rendre l’écriture d’un code de qualité en TypeScript encore plus facile.

Comment configurer ESLint dans Visual Studio Code

Vous pouvez étendre le cœur de Visual Studio Code à l’aide d’extensions. Celles-ci fournissent des caractéristiques et des fonctionnalités supplémentaires pour l’éditeur de code.

L’une des extensions Visual Studio Code les plus populaires pour le développement TypeScript est l’extension ESLint.

ESLint est un outil populaire d’analyse statique du code pour JavaScript et TypeScript qui aide les développeurs à identifier et à corriger les erreurs de codage courantes et à appliquer les normes de codage. L’extension exécute ESLint directement dans l’éditeur.

Intégrons ESLint dans Visual Studio Code dans votre projet TypeScript.

Tout d’abord, initialisez ESLint dans votre projet à l’aide de cette commande de terminal :

npm init @eslint/config

Au cours du processus de configuration, certaines questions vous seront posées pour vous aider à générer le fichier de configuration d’ESLint. Vous pouvez répondre comme suit :

√ 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

Le programme d’installation vérifiera les dépendances et vous demandera si vous souhaitez installer les paquets manquants. Vous pouvez répondre comme suit :

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

À la fin du processus, vous trouverez un nouveau fichier .eslintrc.json contenant le code initial suivant :

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

Le fichier .eslintrc.json contient les paramètres utilisés par ESLint pour appliquer des normes spécifiques de code, de style et de qualité. Voici à quoi peut ressembler un fichier .eslintrc.json de base pour un projet 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"]
    }
}

Il est maintenant temps d’installer l’extension ESLint dans Visual Studio Code. Cliquez sur l’icône Extensions dans le menu de gauche et saisissez ESLint. Trouvez l’extension ESLint et cliquez sur Installer.

Installation de l'extension ESLint dans Visual Studio Code.
Installation de l’extension ESLint dans Visual Studio Code.

Pour permettre à l’extension ESLint d’inspecter automatiquement vos fichiers TypeScript à chaque enregistrement, créez un fichier settings.json dans .vscode avec le contenu suivant :

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

Le fichier settings.json contient la configuration utilisée par Visual Studio Code pour personnaliser le comportement de l’éditeur et de ses extensions.

Redémarrez Visual Studio Code pour que l’éditeur charge les nouvelles extensions et configurations.

Si vous ouvrez index.ts et éditez le code, vous verrez de nouvelles erreurs rapportées par l’IDE. Pour les erreurs de style de code, enregistrez le fichier, et ESLint reformatera automatiquement le code comme défini dans .eslintrc.json.

ESLint en action dans Visual Studio Code.
ESLint en action dans Visual Studio Code.

Maintenant, plus rien ne peut vous empêcher d’écrire du code de qualité ! Il ne vous reste plus qu’à déployer votre application Node.js dans un service d’hébergement cloud moderne comme celui de Kinsta.

Résumé

La configuration de Visual Studio Code pour le développement en TypeScript est assez simple – vous venez d’apprendre comment créer un projet Node.js en TypeScript, le charger dans Visual Studio Code, et utiliser l’IDE pour écrire du code avec l’aide d’IntelliSense. Vous avez également configuré le compilateur TypeScript, configuré le compilateur Node.js pour déboguer le code TypeScript et intégré ESLint dans le projet.

Si vous souhaitez faire passer votre développement d’applications web au niveau supérieur, découvrez les services d’hébergement d’applications web et d’hébergement de bases de données infogérées de Kinsta. Kinsta propose une gamme de solutions d’hébergement optimisées pour la vitesse, la sécurité et l’évolutivité, offrant un environnement idéal pour la création et le déploiement d’applications de haute performance.

Antonello Zanini

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