Entwickeln von JavaScript- und TypeScript-Code in Visual Studio ohne Lösungen oder Projekte

Sie können Code ohne Projekte oder Lösungen entwickeln. Mit diesem Ansatz können Sie einen Codeordner öffnen und sofort mit der Arbeit mit umfangreicher Editorunterstützung wie IntelliSense, Suche, Umgestaltung, Debuggen und mehr beginnen. Zusätzlich zu diesen Features bietet das Node.js Tools für Visual Studio Unterstützung für das Erstellen von TypeScript-Dateien, das Verwalten von npm-Paketen und das Ausführen von npm-Skripts.

Wählen Sie zunächst Datei>Öffnen>Ordner in der Symbolleiste aus. Projektmappen-Explorer alle Dateien im Ordner anzeigt, und Sie können alle Dateien öffnen, um mit der Bearbeitung zu beginnen. Im Hintergrund indiziert Visual Studio die Dateien, um npm-, Build- und Debugfunktionen zu ermöglichen.

Voraussetzungen

  • Die Visual Studio-Workload Node.js-Entwicklung muss installiert sein

npm-Integration

Wenn der Ordner, den Sie öffnen, eine Datei package.json enthält, können Sie mit der rechten Maustaste auf package.json klicken, um ein npm-spezifisches Kontextmenü (Kurzmenü) anzuzeigen.

npm-Menü in Projektmappen-Explorer

npm-Menü in Projektmappen-Explorer

Im Kontextmenü können Sie die von npm installierten Pakete auf die gleiche Weise wie npm-Pakete verwalten , wenn Sie eine Projektdatei verwenden.

Darüber hinaus können Sie über das Menü auch Skripte ausführen, die im Element scripts in package.json definiert sind. Diese Skripts verwenden die Version von Node.js, die für die PATH Umgebungsvariable verfügbar ist. Die Skripts werden in einem neuen Fenster ausgeführt. Dies ist eine hervorragende Möglichkeit zum Ausführen von Build- oder Ausführungsskripts.

Erstellen und Debuggen

package.json

Wenn die package.json im Ordner ein main-Element enthält, ist der Befehl Debug im Kontextmenü nach einem Rechtsklick auf package.json verfügbar. Wenn Sie diesen Befehl auswählen, wird er node.exe mit dem angegebenen Skript als Argument gestartet.

Wenn der Befehl "Debuggen " die App nicht ordnungsgemäß startet, stellen Sie sicher, dass ihre package.json Datei ein Startskript enthält, z. B. das folgende Beispiel.

"main": "index.js",
"scripts": {
  "start": "node index.js",
  "test": "echo \"Error: no test specified\" && exit 1"
},

In diesem Beispiel können Sie das Startskript von package.json ausführen, indem Sie in Projektmappen-Explorer mit der rechten Maustaste auf package.json klicken und npm npm>run script start auswählen.

Ausführen eines Startskripts aus dem npm-Menü

JavaScript-Dateien

Sie können JavaScript-Dateien debuggen, indem Sie mit der rechten Maustaste auf eine Datei klicken und im Kontextmenü " Debuggen" auswählen. Dies beginnt node.exe mit dieser JavaScript-Datei als Argument.

Wenn der Befehl "Debuggen " die App nicht ordnungsgemäß startet, verwenden Sie die im Abschnitt package.json beschriebene Methode, um ein Startskript auszuführen.

TypeScript-Dateien und tsconfig.json

Wenn im Ordner keine tsconfig.json vorhanden sind, können Sie mit der rechten Maustaste auf eine TypeScript-Datei klicken, um Kontextmenübefehle zum Erstellen und Debuggen dieser Datei anzuzeigen. Wenn Sie diese Befehle verwenden, erstellen oder debuggen Sie tsc.exe mit Standardoptionen. (Sie müssen die Datei erstellen, bevor Sie debuggen können.)

Hinweis

Beim Erstellen von TypeScript-Code verwenden wir die neueste Version, die in C:\Program Files (x86)\Microsoft SDKs\TypeScript installiert ist.

Wenn im Ordner eine tsconfig.json Datei vorhanden ist, können Sie mit der rechten Maustaste auf eine TypeScript-Datei klicken, um einen Menübefehl zum Debuggen dieser TypeScript-Datei anzuzeigen. Die Option wird nur angezeigt, wenn in outFilenicht angegeben ist. Wenn ein outFile Wert angegeben ist, können Sie diese Datei debuggen, indem Sie mit der rechten Maustaste auf tsconfig.json klicken und die richtige Option auswählen. Die tsconfig.json Datei bietet Ihnen außerdem eine Buildoption, mit der Sie Compileroptionen angeben können.

Hinweis

Weitere Informationen zu tsconfig.json finden Sie auf der Seitetsconfig.json TypeScript-Handbuch.

Komponententests

Sie können die Komponententestintegration in Visual Studio aktivieren, indem Sie einen Teststamm in Ihrer package.jsonangeben:

{
    // ...
    "vsTest":{
        "testRoot": "./tests"
    }
    // ...
}

Der Testläufer listet die lokal installierten Pakete auf, um zu bestimmen, welches Testframework verwendet werden soll. Wenn keines der unterstützten Frameworks erkannt wird, wird der Testläufer standardmäßig auf ExportRunner festgelegt. Die anderen unterstützten Frameworks sind:

Nach dem Öffnen des Test-Explorers (wählen Sie Test>Windows>Test Explorer aus), erkennt Visual Studio Tests und zeigt diese an.

Hinweis

Der Testläufer enumeriert nur die JavaScript-Dateien im Teststamm, wenn Ihre Anwendung in TypeScript geschrieben ist, müssen Sie diese zuerst erstellen.