Notice - Aide technique
1. Avant-propos
Avant toute chose, il vous faut préparer un environnement sur votre machine vous permettant d’utiliser le logiciel Visual Studio Code et et le langage TypeScript. Pour cela, rendez vous sur la documentation suivante.
2. Utilisation d’un terminal sous Linux
Un terminal est un outil entièrement textuel pour interagir avec un système d’exploitation.
2.1. Ouverture d’un terminal
Pour ouvrir un terminal sous Linux dans les salles de TP, aller sur l’option de menu :
2.2. Commandes pour le terminal
Faites attention aux majuscules!
Afficher le chemin du dossier courant |
|
Lister les elements du dossier courant |
|
Naviguer un dossier (marche avant) |
|
Naviguer un dossier (marche arrière) |
|
Compiler un fichier TypeScript (.ts) |
|
Executer un fichier JavaScript (.js) |
|
3. Utilisation de Visual Studio Code pour TypeScript
Pour les TPs nous allons utiliser l’outil Visual Studio Code pour écrire, compiler et exécuter du code TypeScript.
3.1. Préparation d’un projet TypeScript avec un fichier tsconfig.json
Une fois Visual Studio Code ouvert :
-
Avant toute chose, il est nécessaire d’ouvrir un répertoire de travail avec Visual Studio Code, car sans cela, il ne sera pas capable de compiler et d’exécuter votre code. Faire
File → Open Folder
et choisissez un répertoire où se trouvera (ou bien où se trouve déjà) votre projet. C’est le répertoire dans lequel vous placerez vos fichiers TypeScript, et dans lequel Visual Studio Code produira les résultats de la compilation. -
Ensuite, il est nécessaire de créer un fichier
tsconfig.json
dans le répertoire de travail, afin d’indiquer à Visual Studio Code que le répertoire contient des fichiers TypeScript qu’il faudra compiler et exécuter. tsconfig.json
3.2. Compilation
Pour compiler tous les fichiers TypeScript de votre répertoire de travail :
-
Sélectionnez
Terminal → Run Build Task…
pour lister et utiliser les différentes commandes de compilation. Nous pourrons utiliser par la suite le raccourciCTRL+MAJ+B
pour afficher cette liste. -
Ensuite, deux possibilités :
-
La commande
tsc:build
permet de (re)compiler une seule fois le projet tandis -
la commande
tsc:watch
(outsc:espion
en français) active le système de compilation automatique à chaque sauvegarde d’un fichier. Une foistsc:watch
lancé, vous n’avez plus à le relancer jusqu’à la prochaine ouverture de Visual Studio Code.
-
-
Les informations de compilation s’affichent dans l’onglet TERMINAL situé en bas de l’écran, et les erreurs de compilation dans l’onglet PROBLEMS.
-
Vous pouvez remarquer que non seulement un fichier
.js
a été généré par le compilateur dans le répertoire, mais également un fichier.js.map
. Ce dernier est utilisé par VSCode lorsque le débogueur est utilisé (voir section suivante). De manière générale, vous n’avez pas à regarder le contenu de ces fichiers produits par le compilateur.
3.3. Exécution simple
-
Compilez votre projet (voir section précédente).
-
Ouvrez le fichier que vous souhaitez exécuter.
-
Allez dans
Debug → Start Without Debugging
(CTRL+F5
) pour lancer votre programme compilé. Parmi les choix qui s’affichent, choisissez Node.js.
Vous voyez ensuite apparaître l’ensemble des informations liées à l’exécution dans l’onglet DEBUG CONSOLE.
Si vous avez fait le mauvais choix lors de l’étape 3 et que l’exécution produit un résultat étrange (par exemple un démarrage de Google Chrome ou d’une deuxième fenêtre de VisualStudio Code), la seule solution est de recréer entièrement votre session VisualStudio Code, de la manière suivante :
|
manière d’annuler ce choix est de renommer le fichier que vous souhaitez exécuter. Vous pouvez bien sûr ensuite le renommer une seconde fois pour lui donner à nouveau son nom de départ.
Si c’est le mauvais fichier .ts qui s’exécute lorsque vous faites Start Without Debugging , c’est sans doute parce que votre projet possède une Launch configuration qui restreint l’exécution à un fichier précis.
Vous pouvez supprimer ce comportement soit via un clic droit sur le fichier .vscode/launch.json de votre projet et en sélectionnant Delete Permanently , soit en configurant vos propres Launch configurations (voir section suivante).
|
3.4. Exécution avec une Launch Configuration (avancé)
Optionnellement, il est possible de configurer Visual Studio Code pour exécuter seulement certains fichiers à l’aide de Launch configurations.
Ces configurations sont stockées dans le fichier .vscode/launch.json
.
Pour créer une première Launch configuration:
-
Ouvrez le fichier
.ts
que vous souhaitez pouvoir exécuter. -
Allez dans
Debug → Add Configuration
. Cela va créer le fichier.vscode/launch.json
(s’il n’existe pas) et l’ouvrir dans un éditeur avec un contenu similaire à :
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Lancer MonFichier.ts",
"skipFiles": [
"<node_internals>/**"
],
"program": "${workspaceFolder}/MonFichier.ts",
"outFiles": [
"${workspaceFolder}/**/*.js"
]
}
]
}
-
Dans les grandes lignes, cela spécifie :
-
D’utiliser l’outil
node
pour exécuter le programme. -
Que la Launch configuration s’intitule "Lancer MonFichier.ts".
-
Que le fichier à exécuter est
MonFichier.ts
.
-
Ensuite, pour ajouter de nouvelles Launch configurations:
-
Ouvrez le fichier
.vscode/launch.json
. -
Dupliquez la Launch configuration existante, et séparez vos Launch configurations à l’aide d’une virgule, et changez les attributs
name
etprogram
pour pointer vers un autre fichier.ts
, ce qui donne :
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Lancer MonFichier.ts",
"skipFiles": [
"<node_internals>/**"
],
"program": "${workspaceFolder}/MonFichier.ts",
"outFiles": [
"${workspaceFolder}/**/*.js"
]
},
{
"type": "node",
"request": "launch",
"name": "Lancer UnAutreFichier.ts",
"skipFiles": [
"<node_internals>/**"
],
"program": "${workspaceFolder}/UnAutreFichier.ts",
"outFiles": [
"${workspaceFolder}/**/*.js"
]
}
]
}
Puis, pour utiliser une Launch configuration:
-
Via la barre tout à gauche, allez dans la vue "Debug and Run" (
CTRL+SHIFT+D
). -
En haut à gauche, via un menu déroulant, choisissez la Launch configuration à utiliser pour les prochaines exécutions :
-
Puis lancez l’exécution comme d’habitude (
Debug → Start Without Debugging
). Vous pouvez remarquer que désormais, peu importe quel fichier est ouvert, c’est toujours la Launch configuration qui est utilisée pour lancer l’exécution. C’est très pratique lorsqu’on travaille dans beaucoup de fichiers, et qu’on veut toujours exécuter le même !
Pour finir, on peut noter qu’il est tout de même possible de créer une Launch configuration qui exécute le fichier actuellement ouvert, en utilisant la notation $file
ainsi :
{
"type": "node",
"request": "launch",
"name": "Lancer le fichier courant",
"skipFiles": [
"<node_internals>/**"
],
"program": "${file}",
"outFiles": [
"${workspaceFolder}/**/*.js"
]
}
On retrouve ainsi le comportement par défaut de VS Code.