你的第一個擴充套件
在本主題中，我們將教授你構建擴充套件的基本概念。請確保你已安裝 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 命令一個新的名稱。
- 貢獻另一個命令，在資訊訊息中顯示當前時間。貢獻點是你為了擴充套件 VS Code 而在
package.json擴充套件清單 中進行的靜態宣告，例如向擴充套件新增命令、選單或鍵繫結。 - 將
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 或貢獻點，並遵循我們的 使用者體驗指南 中的建議。
使用 JavaScript
在本指南中，我們主要描述如何使用 TypeScript 開發 VS Code 擴充套件，因為我們相信 TypeScript 為開發 VS Code 擴充套件提供了最佳體驗。但是，如果你更喜歡 JavaScript，你仍然可以使用 helloworld-minimal-sample 進行操作。
使用者體驗指南
這也是一個回顧我們的 使用者體驗指南 的好時機，這樣你就可以開始設計你的擴充套件使用者介面以遵循 VS Code 的最佳實踐。