你的第一個擴充套件
在本主題中，我們將介紹構建擴充套件的基礎概念。請確保您已安裝 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。這將編譯並在一個新的 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 命令賦予一個新名稱。
- 貢獻另一個命令，該命令將在資訊訊息中顯示當前時間。貢獻點是您在
package.json擴充套件清單中進行的靜態宣告，用於擴充套件 VS Code，例如為您的擴充套件新增命令、選單或快捷鍵。 - 將
vscode.window.showInformationMessage替換為另一個 VS Code API 呼叫，以顯示警告訊息。
除錯擴充套件
VS Code 的內建除錯功能使除錯擴充套件變得容易。透過單擊行旁邊的裝訂孔設定斷點，VS Code 將在命中該斷點時暫停。您可以在編輯器中將滑鼠懸停在變數上，或使用左側的 Run and Debug 檢視來檢查變數的值。Debug Console 允許您評估表示式。
您可以在 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 指南的好時機，以便您可以開始設計您的擴充套件使用者介面，以遵循 VS Code 的最佳實踐。