Partage de code pour développer des programmes Nodejs avec vs code

Cet article présente principalement comment utiliser vs code pour développer des programmes Nodejs. L'éditeur pense que c'est plutôt bien, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur pour y jeter un œil, j'espère que cela pourra aider tout le monde.

Récemment, j'ai réétudié nodejs et j'ai eu du mal à choisir un éditeur léger depuis que je suis engagé dans le développement .net, bien que Microsoft ait lancé un plug-in pour Visual Studio pour développer node js. , et utilise Pas mal, mais j'ai toujours l'impression que cet éditeur est trop gros (une installation vaut plusieurs G) ! La boutique en ligne est actuellement l'un des IDE les plus populaires pour le développement Nodejs. La raison de sa popularité est, bien sûr, l'environnement de développement intégré de Nodejs IDE, qui intègre la création, l'édition et le débogage de projets, une configuration simple et de puissantes invites intelligentes. Comme je l'ai déjà dit, j'ai fait du développement .net. Il se trouve que Microsoft a lancé vs code en 2016, un éditeur de texte léger capable d'écrire des programmes dans différentes langues et de les déboguer afin de se familiariser avec cet éditeur. , cela sera pratique pour le développement ultérieur, donc cette fois j'ai choisi vs code comme éditeur pour ce développement (bien que VScode ressemble plus à des éditeurs de fichiers puissants tels que Uedit et Noteplus, il fournit également des fonctions d'invite évolutives et puissantes (en particulier les fichiers). js), et la fonction de débogage Nodejs intégrée, ce qui le rend différent des outils d'édition ordinaires) Bien sûr, cela est également lié à la stratégie future de Microsoft

La prémisse de cet article est que vous avez ! installé le code vs code Editor et l'environnement nodejs, s'il n'est pas installé, veuillez le télécharger et l'installer vous-même

1. Utilisez Express pour créer un projet [Les deux étapes sont effectuées en mode dos ! ]

1. Installez global Express ! (Veuillez ignorer s'il est déjà installé)

npm install -g express

2. Créer un projet

Créer un projet (créer le nom du dossier ExpressApp)

express ExpressApp

Interlude : Si vous êtes habitué à l'environnement Linux, vous pouvez installer cmder sur votre ordinateur (si vous ne savez pas ce que c'est, s'il vous plaît Baidu vous-même), cette commande line tool La mise en page est belle, pas aussi ennuyeuse que le DOS de Microsoft ! J'utilise la version Mini Si vous souhaitez découvrir toutes les fonctions sous Linux, vous pouvez télécharger la version complète.

3. Téléchargez le package tiers

(1) ligne de commande cmd pour basculer vers le répertoire du projet

cd d:\nodejs\ExpressApp

(2) Modifiez package.json si nécessaire et exécutez la commande suivante pour installer le package tiers

npm install

Le package tiers installé Le package peut être vu dans node_modules dans le répertoire du projet

ExpressApp
|– node_modules

(3) Exécutez le projet

npm start

Le résultat est le suivant :

ExpressApp@0.0.0 start d:Nodejs_WorkspaceExpressApp
node ./bin/www
Remarque : la commande npm start sera automatiquement exécuter node ./bin/www

Saisissez http://localhost:3000 dans le navigateur pour accéder à la page d'accueil Express

2. Utilisez VSCode pour développer Nodejs

🎜>

1. Ouvrez Nodejs avec VSCode

code d:\nodejs\ExpressApp 
code.

Remarque : créez ExpressApp.bat sous le projet en cours et saisissez "code . ". La prochaine fois, utilisez ce fichier pour ouvrir le projet Nodejs directement avec VSCode

2. Ajouter des invites intelligentes

Lorsque VSCode ouvre le projet Nodejs, il n'y a pas d'invite intelligente par défaut.

(1) Utilisez TypeScript Definition Manager (TSD) pour télécharger le fichier tsd requis dans le projet Il y aura de l'intelligence lors de son ouverture dans VSCode

Installez tsd globalement (ignorez s'il est installé) <. 🎜>

npm install -g tsd

Téléchargez les invites des composants requis (prenez les invites de téléchargement de node, express, requirejs comme exemple)

tsd query node --action install
tsd query express --action install
tsd install require

Remarque :

①Plusieurs composants d'invite peuvent être séparés par des espaces après le paramètre de requête, abrégé en tsd query node express –action install

②Le composant sera ajouter des typages dans le répertoire du projet Dossier

|– typings
|– node
|– express

|– require

(2) Astuces intelligentes pour ajouter js références du fichier

Si le fichier fait référence à un autre fichier common.js, l'en-tête du fichier est ajouté comme suit

{
  // See https://go.microsoft.com/fwlink/?LinkId=759670
  // for the documentation about the jsconfig.json format
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "allowSyntheticDefaultImports": true
  },
  "exclude": [
    "node_modules",
    "bower_components",
    "jspm_packages",
    "tmp",
    "temp"
  ]
}

(Conseils, si vous avez besoin d'être introduit, une invite "ampoule" s'affichera dans le coin inférieur droit de votre éditeur. Il vous suffit de cliquer sur l'ampoule et vous n'avez pas à travailler dur pour écrire cette configuration. fichier.)

Cette configuration signifie que le code est conforme aux normes ES5 et qu'en utilisant la spécification commonjs, une fois cette configuration émise sous VScode, des invites intelligentes pour exiger des fichiers js référencés dans le fichier peuvent être réalisées. (Il y aura des invites intelligentes lorsque je testerai sans cette configuration, je ne connais pas la raison)

3. Débogage

1. Créer un fichier de configuration de planification VSCode<.>

Lorsque vous cliquez sur le panneau de débogage et cliquez sur le bouton Exécuter (F5), une liste déroulante apparaîtra à droite, sélectionnez "Node.js"

Puis le lancement. json sera créé dans le répertoire du projet

ExpressAppp
|–.vscode
|– launch.json

Vous pouvez éditer launch.json selon vos besoins et modifier les éléments de configuration de démarrage

2. Créez un point d'arrêt :

Créez des points d'arrêt si nécessaire : Sur le côté gauche de la zone d'édition du fichier js, des points d'arrêt seront ajoutés/supprimés

3. Planification

Cliquez sur Exécuter dans le panneau de débogage ou appuyez sur la touche de raccourci F5, puis appuyez sur F10 pour un débogage en une seule étape

 !

En fait, ceux-ci sont inclus dans les documents officiels de Microsoft. Les petits détails ou étapes prévus seront invisibles et ignorés par les développeurs, ce qui aura un certain impact sur le développement ultérieur, veuillez donc suivre strictement les exigences de configuration

Recommandations associées :

Utilisez vs code pour écrire du php et déboguer

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!