Heim > Web-Frontend > js-Tutorial > Hauptteil

Code-Sharing für die Entwicklung von Nodejs-Programmen mit vs-Code

小云云
Freigeben: 2018-02-07 11:31:52
Original
1908 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich die Verwendung von vs-Code zum Entwickeln von Nodejs-Programmen vorgestellt. Der Herausgeber findet ihn recht gut, daher werde ich ihn jetzt mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

Vor kurzem habe ich mich wieder mit NodeJS beschäftigt und hatte Schwierigkeiten, einen einfachen Editor auszuwählen. Seitdem ich mich mit der .net-Entwicklung beschäftige, hat Microsoft ein Plug-In für Visual Studio zur Entwicklung von Node JS auf den Markt gebracht. und verwendet Nicht schlecht, aber ich habe immer das Gefühl, dass dieser Editor zu groß ist (eine Installation ist mehrere G)! Webstore ist derzeit eine der beliebtesten IDEs für die Nodejs-Entwicklung. Der Grund für seine Beliebtheit ist natürlich die integrierte Entwicklungsumgebung von Nodejs IDE, die Projekterstellung, -bearbeitung und -Debugging, einfache Konfiguration und leistungsstarke intelligente Eingabeaufforderungen integriert. Wie ich bereits sagte, habe ich zufällig .net entwickelt, als Microsoft im Jahr 2016 einen leichten Texteditor auf den Markt brachte, der Programme in verschiedenen Sprachen schreiben und debuggen kann , es wird für die spätere Entwicklung praktisch sein, daher habe ich dieses Mal vs-Code als Editor für diese Entwicklung gewählt (obwohl VScode eher wie leistungsstarke Dateieditoren wie Uedit und Noteplus aussieht, bietet es auch skalierbare und leistungsstarke Eingabeaufforderungsfunktionen (insbesondere Datei). js-Referenzaufforderungen) und die integrierte Nodejs-Debugging-Funktion, die es von gewöhnlichen Bearbeitungstools unterscheidet) Natürlich hängt es auch mit der zukünftigen Strategie von Microsoft zusammen

Die Prämisse dieses Artikels ist, dass Sie dies getan haben Installierte den vs-Code-Code. Falls nicht, laden Sie ihn herunter und installieren Sie ihn selbst

1. Verwenden Sie Express, um ein Projekt zu erstellen ]

1. Installieren Sie Global Express! (Bitte ignorieren, falls bereits installiert)


npm install -g express
Nach dem Login kopieren

2. Projekt erstellen

Projekt erstellen (Ordnername ExpressApp erstellen)


express ExpressApp
Nach dem Login kopieren

Zwischenspiel: Wenn Sie an die Linux-Umgebung gewöhnt sind, können Sie diesen Befehl auf Ihrem Computer installieren (wenn Sie nicht wissen, was es ist, bitte Baidu selbst). line-tool Das Layout ist schön, nicht so langweilig wie Microsofts DOS! Wenn Sie alle Funktionen unter Linux erleben möchten, können Sie die Vollversion herunterladen.

3. Laden Sie das Drittanbieterpaket herunter

(1) cmd-Befehlszeile, um zum Projektverzeichnis zu wechseln


cd d:\nodejs\ExpressApp
Nach dem Login kopieren

(2) Bearbeiten Sie package.json nach Bedarf und führen Sie den folgenden Befehl aus, um das Drittanbieterpaket zu installieren


npm install
Nach dem Login kopieren

Der installierte Drittanbieter Das Paket ist in node_modules im Projektverzeichnis zu sehen

ExpressApp
|– node_modules

(3) Führen Sie das Projekt aus


npm start
Nach dem Login kopieren

Die Ausgabe lautet wie folgt:

ExpressApp@0.0.0 start d:Nodejs_WorkspaceExpressApp
node ./bin/www
Hinweis: Der npm-Startbefehl wird automatisch ausgeführt node ausführen ./bin/www

Geben Sie http://localhost:3000 in den Browser ein, um auf die Express-Begrüßungsseite zuzugreifen

2. Verwenden Sie VSCode, um Nodejs zu entwickeln

1. Nodejs mit VSCode öffnen


code d:\nodejs\ExpressApp 
code.
Nach dem Login kopieren

Hinweis: Erstellen Sie ExpressApp.bat unter dem aktuellen Projekt und geben Sie „code“ ein. ". Verwenden Sie beim nächsten Mal diese Datei, um das Nodejs-Projekt direkt mit VSCode zu öffnen

2. Fügen Sie intelligente Eingabeaufforderungen hinzu

Wenn VSCode das Nodejs-Projekt öffnet, gibt es standardmäßig keine intelligente Eingabeaufforderung.

(1) Verwenden Sie den TypeScript Definition Manager (TSD), um die erforderliche TSD-Datei im Projekt herunterzuladen. Beim Öffnen in VSCode werden Informationen angezeigt.
TSD global installieren (ignorieren, falls installiert)


npm install -g tsd
Nach dem Login kopieren

Laden Sie die Eingabeaufforderungen für die erforderlichen Komponenten herunter (nehmen Sie die Eingabeaufforderungen zum Herunterladen von Node, Express und Requirejs als Beispiel)


tsd query node --action install
tsd query express --action install
tsd install require
Nach dem Login kopieren

Hinweis:

①Mehrere Eingabeaufforderungskomponenten können durch Leerzeichen nach dem Abfrageparameter getrennt werden, abgekürzt als tsd query node express –action install

②Die Komponente wird Typisierungen im Projektverzeichnis hinzufügen Ordner

|– Typisierungen
|– Knoten
|– Express
|– Anforderung

(2) Intelligente Tipps zum Hinzufügen js-Dateireferenzen

Wenn die Datei auf eine andere Datei common.js verweist, wird der Dateiheader wie folgt hinzugefügt


{
  // 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"
  ]
}
Nach dem Login kopieren

(Tipps: Wenn Sie rquire eingeführt haben, wird in der unteren rechten Ecke Ihres Editors eine „Glühbirne“-Eingabeaufforderung angezeigt. Sie müssen nur auf die Glühbirne klicken und müssen nicht hart arbeiten, um diese Konfiguration zu schreiben Datei.)

Diese Konfiguration bedeutet, dass der Code den ES5-Standards entspricht und unter Verwendung der commonjs-Spezifikation nach Ausgabe dieser Konfiguration unter VScode intelligente Eingabeaufforderungen für die Anforderung referenzierter js-Dateien in der Datei realisiert werden kann. (Es wird intelligente Eingabeaufforderungen geben, wenn ich ohne diese Konfiguration teste, ich kenne den Grund nicht)

3. Debuggen

1. Erstellen Sie eine VSCode-Planungskonfigurationsdatei

Wenn Sie auf das Debug-Panel klicken und auf die Schaltfläche „Ausführen“ (F5) klicken, erscheint rechts ein Dropdown-Feld. Wählen Sie „Node.js“ aus.

Dann der Start. Die JSON-Datei wird im Projektverzeichnis

ExpressAppp
|–.vscode
|– launch.json

Sie können launch.json nach Bedarf bearbeiten und ändern die Startkonfigurationselemente

2. Einen Haltepunkt erstellen:

Haltepunkte nach Bedarf erstellen: Auf der linken Seite des JS-Dateibearbeitungsbereichs werden Haltepunkte hinzugefügt/entfernt

3. Planung

Klicken Sie im Debugging-Panel auf „Ausführen“ oder drücken Sie die Tastenkombination F5 und drücken Sie F10 für das Debuggen in einem Schritt!

Tatsächlich sind diese in den offiziellen Dokumenten von Microsoft enthalten und werden von den Entwicklern ignoriert, was einen gewissen Einfluss auf die spätere Entwicklung haben wird, also befolgen Sie bitte strikt die Konfigurationsanforderungen! >
Verwandte Empfehlungen:


Verwenden Sie vs-Code, um PHP zu schreiben und zu debuggen

Das obige ist der detaillierte Inhalt vonCode-Sharing für die Entwicklung von Nodejs-Programmen mit vs-Code. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!