你的第一個擴充功能
在本主題中，我們將教您建構擴充功能的基本概念。請確保您已安裝 Node.js 和 Git。
首先，使用 Yeoman 和 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 命令。這將會在新的擴充功能開發主機視窗中編譯並執行擴充功能。
在新視窗的命令面板 (⇧⌘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 最佳實務做法。