您的第一個延伸模組
在本主題中，我們將教您建置延伸模組的基本概念。請確保您已安裝 Node.js 和 Git。
首先，請使用 Yeoman 和 VS Code 延伸模組產生器 (VS Code Extension Generator) 來建立一個可供開發的 TypeScript 或 JavaScript 專案架構。
-
如果您不想為了後續使用而安裝 Yeoman，請執行以下指令
npx --package yo --package generator-code -- yo code -
如果您想全域安裝 Yeoman 以便重複使用，請執行以下指令
npm install --global yo generator-code yo code
對於 TypeScript 專案，請填寫以下欄位
# ? What type of extension do you want to create? New Extension (TypeScript)
# ? What's the name of your extension? HelloWorld
### Press <Enter> to choose default for all options below ###
# ? What's the identifier of your extension? helloworld
# ? What's the description of your extension? LEAVE BLANK
# ? Initialize a git repository? Y
# ? Which bundler to use? unbundled
# ? Which package manager to use? npm
# ? Do you want to open the new folder with Visual Studio Code? Open with `code`
在編輯器中，開啟 src/extension.ts 並按下 F5，或者從命令面板（⇧⌘P (Windows, Linux Ctrl+Shift+P)）執行 Debug: Start Debugging 指令。這將會在新的 延伸模組開發主機 (Extension Development Host) 視窗中編譯並執行該延伸模組。
在新視窗的命令面板（⇧⌘P (Windows, Linux Ctrl+Shift+P)）中執行 Hello World 指令
您應該會看到 Hello World from HelloWorld! 的通知出現。成功！
如果您在偵錯視窗中無法看到 Hello World 指令，請檢查 package.json 檔案，並確保 engines.vscode 版本與您安裝的 VS Code 版本相容。
開發延伸模組
讓我們來修改一下訊息
- 在
extension.ts中，將訊息從 "Hello World from HelloWorld!" 改為 "Hello VS Code"。 - 在新視窗中執行 Developer: Reload Window。
- 再次執行 Hello World 指令。
您應該會看到更新後的訊息顯示出來。
以下是一些您可以嘗試的想法
- 在命令面板中為 Hello World 指令重新命名。
- 貢獻 (Contribute) 另一個能顯示當前時間的訊息指令。貢獻點 (Contribution points) 是您在
package.json延伸模組清單 (Extension Manifest) 中所做的靜態宣告，用於擴充 VS Code，例如為您的延伸模組新增指令、選單或快速鍵。 - 將
vscode.window.showInformationMessage取代為另一個 VS Code API 呼叫，以顯示警告訊息。
偵錯延伸模組
VS Code 的內建偵錯功能讓偵錯延伸模組變得簡單。透過點擊行號旁的邊緣來設定中斷點，VS Code 就會觸發該中斷點。您可以將滑鼠游標停在編輯器中的變數上，或使用左側的 執行與偵錯 (Run and Debug) 檢視來檢查變數的值。偵錯主控台 (Debug Console) 可讓您評估運算式。
您可以在 Node.js 偵錯主題 中了解更多關於在 VS Code 中偵錯 Node.js 應用程式的資訊。
後續步驟
在下一個主題 延伸模組結構 (Extension Anatomy) 中，我們將更深入地研究 Hello World 範例的原始程式碼並解釋關鍵概念。
您可以在此找到本教學的原始程式碼：https://github.com/microsoft/vscode-extension-samples/tree/main/helloworld-sample。延伸模組指南 (Extension Guides) 主題包含其他範例，每個範例都展示了不同的 VS Code API 或貢獻點，並遵循我們 UX 指南 中的建議。
使用 JavaScript
在本指南中，我們主要介紹如何使用 TypeScript 開發 VS Code 延伸模組，因為我們相信 TypeScript 為開發 VS Code 延伸模組提供了最佳體驗。不過，如果您偏好 JavaScript，仍然可以使用 helloworld-minimal-sample 來進行學習。
UX 指南
現在也是閱讀我們 UX 指南 的好時機，這樣您就可以開始設計符合 VS Code 最佳實踐的延伸模組使用者介面。