適用於 Visual Studio Code 的 Webview UI 工具包

2021年10月11日，由 David Dossett (@david_dossett) 和 Hawk Ticehurst (@hawkticehurst) 撰寫

我們非常高興地宣佈 Visual Studio Code Webview UI Toolkit 公開預覽版釋出。藉助這個工具包，擴充套件開發者可以快速輕鬆地建立基於 webview 的 Visual Studio Code 擴充套件，使其外觀、感覺和行為與編輯器本身保持一致。

Webview UI Toolkit 是什麼？

從核心來說，該工具包是一個元件庫，開發者可以使用它在擴充套件 webview 內部構建使用者介面。請注意，除非您絕對需要 webview，否則這不會改變我們避免在擴充套件中使用 webview 的建議。

該庫的特性包括

• 實現 Visual Studio Code 設計語言： 建立的擴充套件與編輯器的其餘部分具有一致的外觀和感覺。
• 自動支援顏色主題： 所有元件在設計時都考慮了主題化，並將自動顯示當前編輯器的主題。
• 使用任何技術棧： 該庫作為一組 Web 元件釋出，這意味著無論擴充套件是使用何種技術棧（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 文件。此外，如果您有任何問題、遇到任何問題或有功能請求，請隨時聯絡我們。

程式設計愉快，

David 和 Hawk