.tutoriel js dans Visual Studio Code

Node.js est une plate-forme permettant de créer des applications serveur rapides et évolutives à L’aide de JavaScript. Nœud.js est le runtime et npm est le Gestionnaire de paquets pour Node.modules js.

Visual Studio Code prend en charge les langages JavaScript et TypeScript prêts à l’emploi ainsi que Node.débogage js. Cependant, pour exécuter un nœud.application js, vous devrez installer le nœud.js runtime sur votre machine.

Pour commencer dans cette procédure pas à pas, Nœud d’installation.js pour votre plate-forme., Le Gestionnaire de paquets de nœud est inclus dans le nœud.js de distribution. Vous devrez ouvrir un nouveau terminal (invite de commande) pour que les outils de ligne de commande node et npm soient sur votre chemin.

Linux: il existe un nœud spécifique.paquets js disponibles pour les différentes saveurs de Linux. Voir Installation De Nœud.js via le gestionnaire de paquets pour trouver le nœud.js package et instructions d’installation adaptées à votre version de Linux.

Astuce: Pour vérifier que vous avez Nœud.,js correctement installé sur votre ordinateur, ouvrez un nouveau terminal et tapez node --help et vous devriez voir la documentation de l’utilisation.

Bonjour le Monde

nous allons commencer par créer le plus simple Nœud.application js, « Hello World ».

Créer un dossier vide appelé « bonjour », naviguer en et ouvrir VS Code:

mkdir hellocd hellocode .

Astuce: Vous pouvez ouvrir des fichiers ou des dossiers directement à partir de la ligne de commande. Période ‘.,’fait référence au dossier actuel, donc VS Code va démarrer et ouvrir le dossier Hello.

à Partir de l’Explorateur de Fichier de la barre d’outils, appuyez sur le bouton Nouveau Fichier:

et le nom du fichier app.js:

En utilisant la balise .js extension de fichier, VS Code interprète ce fichier JavaScript et d’évaluer le contenu avec le langage JavaScript service. Reportez-vous à la rubrique VS Code JavaScript language pour en savoir plus sur la prise en charge de JavaScript.,

créez une variable de chaîne simple dansapp.js et envoyez le contenu de la chaîne à la console:

var msg = 'Hello World';console.log(msg);

notez que lorsque vous avez tapéconsole. IntelliSense sur l’objetconsole vous a été automatiquement présenté.

notez Également que VS Code sait que msg est une chaîne basée sur l’initialisation de la 'Hello World'., Si vous tapez msg. vous verrez IntelliSense affiche toutes les fonctions de chaîne disponible sur: msg.

Après avoir expérimenté IntelliSense, annulez toute modification supplémentaire de l’exemple de code source ci-dessus et enregistrez le fichier (Ctrl S (Windows, Linux Ctrl+S)).

exécutant Hello World

Il est simple d’exécuterapp.js avec Node.js. À partir d’un terminal, tapez simplement:

node app.js

Vous devriez voir « Hello World » sortie sur le terminal, puis le Nœud.,js renvoie.

terminal intégré

VS Code a un terminal intégré que vous pouvez utiliser pour exécuter des commandes shell. Vous pouvez exécuter Nœud.js directement à partir de là et évitez de sortir du code VS lors de l’exécution des outils de ligne de commande.

pour cette procédure pas à pas, vous pouvez utiliser un terminal externe ou le terminal intégré au code VS pour exécuter les outils de ligne de commande.

Débogage Bonjour tout le Monde

Comme mentionné dans l’introduction, VS Code est livré avec un débogueur pour le Nœud.applications js. Essayons de déboguer notre simple application Hello World.,

pour définir un point d’arrêt dans app.js, placez le curseur de l’éditeur sur la première ligne et appuyez sur F9 ou cliquez dans la gouttière gauche de l’éditeur à côté des numéros de ligne. Un cercle rouge apparaîtra dans la gouttière.

Pour démarrer le débogage, sélectionnez la Vue Run dans la Barre d’Activité:

Vous pouvez maintenant cliquez sur barre d’outils de Débogage de la flèche verte ou appuyez sur F5 pour lancer et déboguer « Hello World ». Votre point d’arrêt sera atteint et vous pourrez visualiser et parcourir l’application simple., Notez que VS Code affiche une barre d’État de couleur différente pour indiquer qu’il est en mode Débogage et que la CONSOLE de débogage est affichée.

maintenant que vous avez vu le code VS en action avec « Hello World », la section suivante montre l’utilisation du code VS avec un nœud de pile complète.js web app.

Remarque: Nous avons terminé avec L’exemple « Hello World », alors naviguez hors de ce dossier avant de créer une application Express. Vous pouvez supprimer le dossier « Hello » si vous le souhaitez car il n’est pas requis pour le reste de la procédure pas à pas.,

une application Express

Express est un framework d’application très populaire pour la construction et l’exécution de nœuds.applications js. Vous pouvez échafauder (créer) une nouvelle application Express À l’aide de L’outil Express Generator. Le Générateur Express est livré en tant que module npm et installé à l’aide de l’outil de ligne de commande npm npm.

Astuce: Pour vérifier que vous avez npm correctement installé sur votre ordinateur, tapez npm --help à partir d’un terminal et vous devriez voir la documentation de l’utilisation.,

installez le Générateur Express en exécutant ce qui suit à partir d’un terminal:

npm install -g express-generator

Le -g générateur globalement sur votre machine afin que vous puissiez l’exécuter de n’importe où.

Nous pouvons maintenant échafaudage d’une nouvelle demande Expresse appelé myExpressApp en cours d’exécution:

express myExpressApp --view pug

Cela crée un nouveau dossier appelé myExpressApp avec le contenu de votre application., Les paramètres--view pug indiquent au générateur d’utiliser le moteur de modèle pug.

Pour installer toutes les dépendances de l’application (de nouveau livré comme mnp modules), allez dans le nouveau dossier et exécuter npm install:

cd myExpressAppnpm install

À ce stade, nous devrions tester notre application s’exécute. L’généré Express application a un package.json fichier qui comprend un start script à exécuter node ./bin/www. Cela va démarrer le nœud.application js en cours d’exécution.,

à Partir d’un terminal à l’Express, dossier de l’application, exécutez la commande:

npm start

Le Nœud.le serveur web js démarre et vous pouvez naviguer vers http://localhost:3000 pour voir l’application en cours d’exécution.

la Grande édition de code

Fermer le navigateur et à partir d’un terminal dans le myExpressApp dossier, arrêtez le Nœud.serveur js en appuyant sur CTRL + C.,

Lancez maintenant VS Code:

code .

Remarque: Si vous avez utilisé le terminal intégré VS Code pour installer le Générateur Express et échafauder l’application, vous pouvez ouvrir le myExpressApp dossier de votre instance vs code en cours d’exécution avec la commande file > ouvrir le dossier.

Le Nœud.la documentation js et Express fait un excellent travail en expliquant comment créer des applications riches en utilisant la plate-forme et le framework., Visual Studio Code vous rendra plus productif dans le développement de ces types d’applications en offrant d’excellentes expériences d’édition de code et de navigation.

ouvrez le fichierapp.js et survolez le nœud.js objet global __dirname. Notez comment VS Code comprend que __dirname est une chaîne. Encore plus intéressant, vous pouvez obtenir plein IntelliSense contre le nœud.cadre js. Par exemple, vous pouvez exiger http et obtenir IntelliSense complet par rapport à la classe http lorsque vous tapez du Code Visual Studio.,

VS Code utilise des fichiers de déclaration de type TypeScript (par exemplenode.d.ts) pour fournir des métadonnées au VS Code sur les frameworks basés sur JavaScript que vous utilisez dans votre application. Les fichiers de déclaration de Type sont écrits en TypeScript afin qu’ils puissent exprimer les types de données des paramètres et des fonctions, ce qui permet à VS Code de fournir une expérience IntelliSense riche. Grâce à une fonctionnalité appelée Automatic Type Acquisition, vous n’avez pas à vous soucier de télécharger ces fichiers de déclaration de type, VS Code les installera automatiquement pour vous.,

Vous pouvez également écrire du code qui fait référence à des modules dans d’autres fichiers. Par exemple, dans app.js nous avons besoin de la balise ./routes/index module, qui exporte une Express.Router de classe. Si vous affichez IntelliSense sur index, vous pouvez voir la forme de la classe Router.

Déboguer votre Express app

Vous aurez besoin de créer un débogueur fichier de configuration launch.json pour votre demande Expresse., Cliquez sur L’icône Exécuter dans la barre D’activité, puis sur L’icône Configurer l’engrenage en haut de la vue Exécuter pour créer un fichier launch.json par défaut. Sélectionnez le nœud.js environnement en assurant que le type propriété configurations est réglé sur "node". Lorsque le fichier est créé pour la première fois, VS Code recherchera dans package.json un script start et utilisera cette valeur comme program (qui dans ce cas est "${workspaceFolder}\\bin\\www) pour la configuration du programme de lancement.,

{ "version": "0.2.0", "configurations": }

Enregistrez le nouveau fichier et assurez-vous que le programme de lancement est sélectionné dans le menu déroulant configuration en haut de la vue exécuter. Ouvrez app.js et définissez un point d’arrêt près du haut du fichier où L’objet Express app est créé en cliquant dans la gouttière à gauche du numéro de ligne. Appuyez sur F5 pour démarrer le débogage de l’application. VS Code démarrera le serveur dans un nouveau terminal et atteindra le point d’arrêt que nous avons défini. De là, vous pouvez inspecter les variables, créer des montres et parcourir votre code.,

Déployer votre application

Si vous souhaitez découvrir comment déployer votre application web, découvrez le Déploiement des Applications Azure tutoriels où nous montrons comment lancer votre site web Azure.

Il y a beaucoup plus à explorer avec Visual Studio Code, veuillez essayer les sujets suivants:

• paramètres – Apprenez à personnaliser VS Code pour la façon dont vous aimez travailler.
• débogage – C’est là que VS Code brille vraiment.
• vidéo: mise en route avec Node.débogage js-Apprenez à attacher à un nœud en cours d’exécution.processus js.
• Nœud.,débogage js-en savoir plus sur le nœud intégré de VS Code.débogage js.
• recettes de débogage – exemples de scénarios comme le débogage côté client et conteneur.
• tâches – exécuter des tâches avec Gulp, Grunt et Jake. Montrant les Erreurs et les Avertissements.