你的第一個擴充功能
在本主題中，我們將教導您建置擴充功能的基本概念。請確定您已安裝 Node.js 和 Git。
首先，使用 Yeoman 和 VS Code 擴充功能產生器 來搭建一個已準備好進行開發的 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。這將會在新的 擴充功能開發主機 視窗中編譯並執行擴充功能。
從新視窗中的命令面板 (⇧⌘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 命令提供一個新名稱。
- 貢獻 另一個命令，以資訊訊息顯示目前時間。貢獻點是您在
package.json擴充功能資訊清單 中進行的靜態宣告，以擴充 VS Code，例如將命令、選單或快速鍵新增至您的擴充功能。 - 將
vscode.window.showInformationMessage替換為另一個 VS Code API 呼叫，以顯示警告訊息。
偵錯擴充功能
VS Code 的內建偵錯功能讓偵錯擴充功能變得容易。透過按一下行號旁的邊界設定中斷點，VS Code 就會命中該中斷點。您可以將滑鼠游標停留在編輯器中的變數上方，或使用左側的 執行和偵錯 檢視來檢查變數的值。「偵錯主控台」可讓您評估運算式。
您可以在 Node.js 偵錯主題 中深入了解如何在 VS Code 中偵錯 Node.js 應用程式。
後續步驟
在下一個主題 擴充功能剖析 中，我們將更仔細地研究 Hello World 範例的原始碼，並說明關鍵概念。
您可以在以下位置找到本教學課程的原始碼：https://github.com/microsoft/vscode-extension-samples/tree/main/helloworld-sample。「擴充功能指南」主題包含其他範例，每個範例都說明不同的 VS Code API 或貢獻點，並遵循我們的 UX 指南 中的建議。
使用 JavaScript
在本指南中，我們主要描述如何使用 TypeScript 開發 VS Code 擴充功能，因為我們相信 TypeScript 為開發 VS Code 擴充功能提供最佳體驗。但是，如果您偏好 JavaScript，您仍然可以使用 helloworld-minimal-sample 來繼續學習。
UX 指南
現在也是檢閱我們的 UX 指南 的好時機，以便您可以開始設計您的擴充功能使用者介面，以遵循 VS Code 最佳實務。