Webview UI Toolkit for Visual Studio Code

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

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

什麼是 Webview UI Toolkit？

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

此程式庫的功能包括

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

我們為何建構它？

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

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

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

我們需要您的意見反應！

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

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

Happy Coding，

David 和 Hawk