vscode插件開發中文文檔教程(2)——您的第一個擴展詳情 - 前端,javascript,typescript,vscode插件倔強青銅三博客

vscode插件開發中文文檔教程(2)——您的第一個擴展

原文鏈接：Your First Extension
作者：Microsoft
譯者：倔強青銅三

前言

大家好，我是倔強青銅三。是一名熱情的軟件工程師，我熱衷於分享和傳播IT技術，致力於通過我的知識和技能推動技術交流與創新，歡迎關注我，微信公眾號：倔強青銅三。歡迎點贊、收藏、關注，一鍵三連！！！

您的第一個擴展

在本主題中，我們將教您構建擴展的基本概念。請確保您已安裝 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 或從命令面板 (Ctrl+Shift+P) 運行命令 Debug: Start Debugging。這將在新的 Extension Development Host 窗口中編譯並運行擴展。

在新窗口中從命令面板 (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 視圖中檢查變量的值。調試控制枱允許您評估表達式。

您可以在 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 的最佳實踐。

最後感謝閲讀！歡迎關注我，微信公眾號：倔強青銅三。歡迎點贊、收藏、關注，一鍵三連！！！

倔強青銅三博客

倔強青銅三博客

博客 / 詳情