參加你附近的 ，瞭解 VS Code 中的 AI 輔助開發。

適用於 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