在 Visual Studio 中開發 JavaScript 和 TypeScript 程式碼,無需解決方案或專案

你可以 在沒有專案或解決方案的情況下開發程式碼。 這種方法讓你能打開一個程式碼資料夾,立即開始使用豐富的編輯器支援,如 IntelliSense、搜尋、重構、除錯等功能。 除了這些功能外,Node.js Tools for Visual Studio 還新增了建立 TypeScript 檔案、管理 npm 套件及執行 npm 腳本的支援。

要開始,請從工具列選擇「 檔案>開啟>資料夾 」。 方案總管 會顯示資料夾中的所有檔案,你可以打開任何檔案開始編輯。 在背景,Visual Studio 會索引這些檔案,以啟用 npm、建置和除錯功能。

先決條件

  • 必須安裝 Visual Studio 的 Node.js 開發 工作負載

NPM 整合

如果你打開的資料夾裡有 package.json 檔案,你可以右鍵點擊 package.json 顯示一個專屬於 NPM 的右鍵選單(捷徑選單)。

方案總管 中的 npm 選單

方案總管 中的 npm 選單

在快捷功能表中,你可以像在使用專案檔案時一樣,管理 npm 套件

此外,選單也允許你執行在 package.jsonscripts 元素中定義的指令碼。 這些腳本會使用環境變數上 PATH 可用的 Node.js 版本。 腳本會在新視窗執行。 這是執行建置或執行指令碼的好方法。

建置與除錯

package.json

如果資料夾中的 package.json 指定了元素 main ,則在右鍵快捷選單中可以使用 除錯 指令 package.json。 當你選擇這個指令時,它會以指定的腳本作為參數 node.exe 開始。

如果 Debug 指令無法正確啟動應用程式,請確保你的 package.json 檔案包含啟動腳本,例如以下範例。

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

在這個例子中,你可以從 package.json 執行開始腳本,方法是右鍵點擊方案總管中的package.json,並選擇 Npm>npm 執行腳本開始

從 npm 選單執行 start 腳本

JavaScript 檔案

你可以透過右鍵點擊檔案,然後從捷徑選單中選擇 除錯 來除錯 JavaScript 檔案。 這 node.exe 以該 JavaScript 檔案作為參數開始。

如果 Debug 命令無法正確啟動應用程式,請依照 package.json 一節所述的方法執行啟動指令碼。

TypeScript 檔案與 tsconfig.json

如果資料夾裡沒有 tsconfig.json ,你可以右鍵點擊 TypeScript 檔案,查看快捷鍵選單指令來建立和除錯該檔案。 使用這些指令時,你會用預設選項的 tsc.exe 來建置或除錯。 (你需要先建置檔案才能除錯。)

Note

建置 TypeScript 程式碼時,我們會使用安裝在 C:\Program Files (x86)\Microsoft SDKs\TypeScript 中的最新版本。

如果資料夾中有 tsconfig.json 檔案,你可以右鍵點擊 TypeScript 檔案,看到選單指令來除錯該 TypeScript 檔案。 該選項僅在 outFile中未指定時出現。 如果指定了 outFile,你可以按一下滑鼠右鍵點選 tsconfig.json,並選擇適當的選項來對該檔案進行偵錯。 檔案 tsconfig.json 中也提供編譯選項,讓你指定編譯器選項。

Note

你可以在 tsconfig.json TypeScript 手冊頁面找到更多關於 tsconfig.json 的資訊。

單元測試

你可以在Visual Studio中啟用單元測試整合,方法是在 package.json中指定測試根節點:

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

測試執行者會列舉本地安裝的套件,以決定使用哪個測試框架。 若無支援框架被識別,測試執行器會預設為 ExportRunner。 其他支援的框架包括:

開啟 [測試總管] 之後(選擇 [測試]>[Windows>測試總管]],Visual Studio 會探索並顯示測試。

Note

測試執行程式只會列舉測試根目錄中的 JavaScript 檔案,如果你的應用程式是用 TypeScript 撰寫,就必須先建立這些檔案。