Créer une application Node.js dans Visual Studio Code
Dans cette leçon, vous comprendrez comment :
- Créer une application JavaScript à l’aide de Visual Studio Code et Cosmos DB.
- Utiliser IntelliSense pour vous aider à écrire du code.
- Exécuter l’application à l’aide de Node.js à partir de Visual Studio Code.
- Utiliser le débogueur intégré pour parcourir votre code et examiner les variables pendant l’exécution de votre code.
Créer une application JavaScript pour Node.js
Vous pouvez créer une application JavaScript pour Node.js à partir de Visual Studio Code à l’aide d’une fenêtre de terminal. La commande npm init -y crée un fichier nommé package.json dans le dossier de l’application. Ce fichier contient des métadonnées que vous utilisez pour décrire votre application au runtime Node.js.
Créez ensuite un nouveau fichier pour le code de votre application. Quand vous sauvegardez le fichier, veillez à donner au fichier l’extension .js (pour JavaScript). Vous êtes maintenant prêt à commencer à écrire votre code JavaScript.
Utiliser IntelliSense pour faciliter l’écriture de votre code
À mesure que vous écrivez votre code, IntelliSense peut effectuer le contrôle de type et la saisie semi-automatique de code. Par exemple, lorsque vous créez des fonctions, définissez des types, voire importez un module dans un fichier JavaScript, les éléments que vous avez ajoutés ou importés sont disponibles dans IntelliSense.
À mesure que vous tapez, IntelliSense utilise une combinaison de contrôle de type et d’inférence de type pour afficher les suggestions appropriées au contexte actuel. L’inférence de type permet à IntelliSense de présenter des suggestions de complétion du code valides à mesure que vous écrivez votre code :
Le contrôle de type permet à IntelliSense de montrer les paramètres qu’un appel de fonction peut prendre, et vérifie les types pour les expressions que vous fournissez pour chaque fonction :
Voici d’autres fonctionnalités IntelliSense disponibles dans Visual Studio Code :
- Détection du code inaccessible et des variables inutilisées. Les instructions qui ne peuvent jamais être exécutées, et les variables qui ne sont jamais utilisées, ne sont pas affichées dans l’éditeur.
- Aperçu des définitions et des références. La fonctionnalité d’aperçu vous permet d’afficher rapidement la définition d’un objet ou d’une fonction, même s’il ou elle se trouve dans un autre fichier. Cliquez avec le bouton droit sur une variable ou une fonction, puis sélectionnez Aperçu de définition ou Peek References (Aperçu de références). La définition ou les références s’affichent dans une fenêtre indépendante.
- Accédez à une définition de variable, de fonction ou de type. Cette fonctionnalité vous permet de passer directement à la définition d’une variable, d’une fonction ou d’un type dans votre code. Cela est utile si vous devez modifier la définition d’un élément ou modifier une fonction. Cliquez avec le bouton droit sur le code qui référence votre variable ou type, ou qui appelle votre fonction. Sélectionnez Atteindre la définitionou Atteindre la définition de type.
- Suggestion d’une possible refactorisation de votre code. Les points de suspension (...) sous un élément indiquent les zones où IntelliSense propose une ou plusieurs suggestions. Sélectionnez les points de suspension pour afficher les suggestions. Sélectionnez Correctif rapide pour implémenter la suggestion.
Exécuter et déboguer une application Node.js
La méthode d’exécution la plus simple d’une application Node.js à partir de Visual Studio Code consiste à utiliser la commande node depuis une fenêtre de terminal. Par exemple, pour exécuter le code dans un fichier nommé index.js, exécutez node index.js.
Vous pouvez utiliser le débogueur Node.js natif (par exemple, node inspect index) à partir d’une fenêtre de terminal, mais Visual Studio Code fournit un environnement amélioré pour exécuter pas à pas et déboguer des applications Node.js.
Configurez le débogueur dans le fichier launch.json
Avant d’utiliser le débogueur Visual Studio Code, vous devez le configurer. Pour modifier les paramètres de configuration du débogueur, dans le menu Exécuter, sélectionnez Ajouter les configurations. Dans l’option Sélectionner le débogueur, sélectionnez Node.js. Le fichier./.vscode/launch.json affiche votre nouvelle configuration.
{
// 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_internals>/**"
],
"program": "${workspaceFolder}/index.js",
}
]
}
Pour cette application Contoso, avec plusieurs fichiers de code à exécuter, nous ajouterons quelques propriétés supplémentaires. Remplacez le nom du fichier de propriété du programme par ${file}. Cela vous permet de déboguer le fichier JavaScript actuellement actif. Ajoutez la propriété args quand vous devez transmettre des paramètres à l’application. Ces valeurs sont disponibles à partir de la propriété process.argv disponible dans le runtime Node.js.
{
// 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_internals>/**"
],
// ${file} is replaced with active file's name
"program": "${workspaceFolder}/${file}",
// these values are available as process.argv
"args": ["abc", "1"],
}
]
}
Définir des points d’arrêt
Avant de commencer à déboguer, vous devriez définir un point d’arrêt dans le code de votre application. Pour ce faire, cliquez dans la marge de gauche de l’instruction à laquelle vous souhaitez suspendre l’exécution. Un point rouge s’affiche.
Démarrer le débogage
Pour démarrer le débogage, sélectionnez Démarrer le débogage dans le menu Exécuter ou lancez le débogueur, F5. Si vous utilisez un terminal externe, une nouvelle fenêtre de terminal s’affiche. La sortie du débogueur s’affichera dans la fenêtre de sortie de Visual Studio Code.
Quand le débogueur atteint un point d’arrêt dans votre application, l’exécution est suspendue et l’instruction de point d’arrêt est mise en surbrillance. Windows dans l’explorateur Exécuter et déboguer vous permet d’examiner et de définir les valeurs des variables locales et globales, ainsi que la pile des appels. Vous pouvez aussi ajouter des expressions de type Espion, qui sont évaluées et affichées à mesure de l’exécution.
| Élément | Description |
|---|---|
| 1 - Variables | Toutes les variables dans l’étendue locale et globale. |
| 2 - Surveiller | Ajoutez toutes les variables à surveiller pendant l’exécution. |
| 3 - Pile des appels | La pile d’exécution de l’application à l’heure actuelle. |
| 4 - Points d’arrêt | Tous les points d’arrêt définis dans l’application. |
| 5 - Barre d'outils de débogage | Cette barre d’outils contient des commandes qui vous permettent d’exécuter pas à pas votre code. Si une instruction contient un appel de fonction, vous pouvez effectuer un pas à pas détaillé de cette fonction ou effectuer un pas à pas principal de celle-ci. La commande de pas à pas sortant continue l’exécution jusqu’à ce que la fonction se termine. Vous pouvez également continuer à exécuter l’application jusqu’à ce que le débogueur atteigne un autre point d’arrêt ou que l’application se termine. |
| 6 - Console de débogage | Consultez toutes les valeurs d’instruction de console. |
Quand vous ajoutez du code JavaScript dans les prochains exercices, vous devrez peut-être déboguer le code pour déterminer ce qui est incorrect. Revenez à cette leçon si nécessaire.