🚀 在 VS Code 中！

Visual Studio Code 的 Webview UI 工具組

2021 年 10 月 11 日，作者：David Dossett，@david_dossett 和 Hawk Ticehurst，@hawkticehurst

我們非常興奮地宣布 Visual Studio Code 的 Webview UI 工具組公開預覽版。透過此工具組，擴充功能開發人員可以快速且輕鬆地在 Visual Studio Code 中建立基於 webview 的擴充功能，使其外觀、感覺和行為都與編輯器本身一致。

Webview UI Toolkit for Visual Studio Code: gallery view of components

什麼是 Webview UI 工具組？

此工具組的核心是一個元件庫，開發人員可以使用它在擴充功能 webview 內建置使用者介面。請注意，這並未改變我們關於避免在擴充功能中使用 webview 的建議，除非您絕對需要它們。

此程式庫的功能包括

  • 實作 Visual Studio Code 設計語言： 建立與編輯器其餘部分具有一致外觀和感覺的擴充功能。
  • 自動支援色彩主題： 所有元件在設計時都考慮到主題，並將自動顯示目前的編輯器主題。
  • 使用任何技術堆疊： 此程式庫以一組 Web 元件的形式發布，這表示無論開發人員的擴充功能是使用何種技術堆疊 (React、Vue、Svelte 等) 建置的，都可以使用此工具組。
  • 開箱即可存取： 所有元件都隨附符合 Web 標準的 ARIA 標籤和鍵盤導航。

我們為何建構它？

我們希望確保使用 webview 的擴充功能對其使用者而言是可預測、一致且可存取的。

任何時候擴充功能使用 Webview API，建立符合 webview 指南的 UI 的責任都落在擴充功能作者身上。因此，webview 有可能在外觀和行為上與 Visual Studio Code 的其餘部分不同。在最糟的情況下，使用者必須導航看起來與編輯器其餘部分完全不同的無法存取的擴充功能 UI。

有了 Webview UI 工具組，我們現在與擴充功能作者分擔部分責任。我們可以擔心主題、可存取性以及核心 UI 元件的行為/樣式實作的細微細節，讓您不必擔心。這表示更容易開發、提高開發人員速度，並最終有更多時間來處理使您的擴充功能獨一無二的部分！

我們需要您的意見回饋！

我們迫不及待想讓您試用 Webview UI 工具組！當我們朝 1.0 版本邁進時，請告訴我們如何改善建立基於 webview 的擴充功能的體驗。

如果您想了解更多資訊，您可以參考 Visual Studio Code 的 Webview UI 工具組 文件。此外，如果您有任何問題、遇到任何問題或有功能要求，請隨時與我們聯繫。

祝您編碼愉快，

David 和 Hawk