Visual Studio Code 現已支援 Baseline

Rick Viscomi

發布日期：2025 年 5 月 20 日

現代程式碼編輯器整合了您需要用來有效建構項目的工具和參考文件，因此能大幅提升生產力，這就是 IDE 中的「I」。在 Visual Studio Code (VS Code) 等許多 IDE 中，當您將游標懸停在編輯器中的網頁功能上時，系統會顯示額外資訊，有助於提升工作效率。這項資訊包括功能說明、支援的瀏覽器、語法指南，以及 MDN 上的詳細資訊連結。

瀏覽器相容性資訊在 IDE 環境中特別實用，因為只要將滑鼠游標懸停在功能上，就能立即取得互通性回饋。您可以根據這項資訊判斷某項功能是否符合瀏覽器支援目標、是否需要採取防禦措施來逐步強化或 polyfill 該功能，或是完全避免使用該功能。

在舊版 VS Code 中，將滑鼠游標懸停在 CSS 屬性長寬比上，瀏覽器支援以版本號碼表示：Edge 88、Firefox 89、Safari 15、Chrome 88、Opera 74
在舊版 VS Code 中，將滑鼠游標懸停在 aspect-ratio CSS 屬性上，瀏覽器支援會以版本號碼表示：「Edge 88、Firefox 89、Safari 15、Chrome 88、Opera 74」

舊版 VS Code 會以瀏覽器版本號碼表示這項資訊，類似於您在 MDN、Can I Use 或 web.dev 網站上看到的相容性表格。但這些網站的共同點是，也都開始使用 Baseline 摘要說明複雜的瀏覽器支援情況。因此，為了讓 VS Code 與其他資源傳達瀏覽器相容性資訊的方式保持一致，VS Code 現在也支援 Baseline。

如要使用新的 Baseline UI，請升級至 VS Code 1.100 以上版本。一切都可立即使用，不需要擴充功能或額外設定。

在最新版 VS Code 中將滑鼠游標懸停在 aspect-ratio CSS 屬性上，瀏覽器支援以 Baseline 表示：適用於主要瀏覽器 (自 2021 年起為 Baseline)
在最新版 VS Code 中，將滑鼠游標懸停在 aspect-ratio CSS 屬性上，瀏覽器支援程度會以 Baseline 表示：「Widely available across major browsers (Baseline since 2021)」(各大瀏覽器廣泛支援 (自 2021 年起為 Baseline))

在最新版 VS Code 中，只要將游標懸停在網頁功能上，即可查看其 Baseline 狀態。為方便您瞭解這項功能支援的時間長度，VS Code 也會顯示該功能成為基準的年份。如果功能尚未成為 Baseline，系統會顯示尚未完全實作該功能的瀏覽器。

在舊版 VS Code 中，這項操作並不容易。查看支援的瀏覽器版本清單，並找出缺少的瀏覽器，需要花費一些時間。最難搞清楚的部分，或許是各瀏覽器支援這項功能的時間。為此，您需要知道每個版本的發布時間，但這並非一般常識！幸好，這些因素都會納入基準狀態和年份。

供應情形受限的自動更正 HTML 屬性懸停資訊卡
供應情形有限的 autocorrect HTML 屬性懸停資訊卡

這個版本也包含全新功能。先前您只能查看 CSS 屬性的瀏覽器支援資料，每年都會推出許多新的 CSS 功能，因此這項功能特別實用。但 HTML 也有許多創新之處！從這個版本開始，VS Code 也會根據 HTML 元素和屬性的 Baseline 狀態，顯示瀏覽器支援資訊。

舉例來說，autocorrect 輸入屬性在 Firefox 瀏覽器中推出後，這項功能可立即提供回饋，告知您功能適用範圍有限，方便您進一步瞭解功能適用或不適用的情況。在這個特定情況下，在不支援的瀏覽器中執行不會造成損害，因此請放心使用！

將滑鼠懸停在「廣泛適用」對話方塊 HTML 元素和「新推出」快訊屬性上
將滑鼠游標懸停在「廣泛適用」dialog HTML 元素和「新推出」popover 屬性上

其他 HTML 功能 (例如 dialog 元素) 的降級效果不如 autocorrect。因此，能夠叫用 dialog 懸停資訊卡，並確認該功能自 2022 年以來確實是 Baseline，且在主要瀏覽器中廣泛適用，這點令人放心。這類資訊可讓您放心採用原本認為太過先進的功能。

Popover API 是另一個 HTML 功能範例，該功能也已成為 Baseline，但僅限 2024 年，因此仍視為「新推出」。也就是說，雖然所有主要瀏覽器都支援這項功能，但尚未達到廣泛支援的 2.5 年期限。因此，在向所有使用者發布這項功能前，建議您謹慎行事。

HTML ESLint 醒目顯示自動修正功能尚未達到基準，並使用註解抑制該警告
HTML ESLint 會醒目顯示 autocorrect 功能尚未成為 Baseline，並使用註解抑制該警告

在 VS Code 中隨時取得這項資訊，可大幅提升工作效率。但如果不需要將游標懸停在功能上，就能判斷是否為 Baseline，這項功能是由另一個相關工具「Linter」提供。

舉例來說，VS Code 的 ESLint 擴充功能可以檢查 HTML 和 CSS 檔案，並為任何尚未達到 Baseline 的功能加上波浪底線。這項功能是由最近新增的 use-baseline 規則提供支援，這些規則來自 HTML ESLint 和 ESLint for CSS 外掛程式。如果想使用 Stylelint，也有類似的規則。當然，這只是其中一項好處，但足以說明 Lint 如何與啟用 Baseline 的懸停資訊卡相輔相成。

如果您是 VS Code 使用者，希望您能試試新的懸浮資訊卡。如果你不是 VS Code 使用者，我也有好消息要告訴你。許多 IDE 都是從 Code - OSS (VS Code 的開放原始碼版本) 分支而來，或是採用相同的語言伺服器，為 HTML 和 CSS 懸停資訊卡提供支援。這些下游 IDE 可能需要數週或數月才能升級至最新版本，但升級後應該會自動沿用新的 Baseline UI：

  • VSCodium
  • Firebase Studio
  • Cursor
  • 滑浪風帆
  • Zed
  • Eclipse Theia
  • Trae
  • GitHub Codespace
  • GitLab 工作區
  • Replit
  • StackBlitz (Bolt)

JetBrains 也致力於將 Baseline 與所有以 IntelliJ 為基礎的 IDE 整合，首先是 WebStorm。我們會在另一篇網誌文章中詳細說明，敬請期待。

越來越多開發人員工具和資源都支援 Baseline，而 VS Code 帶領的這些全新 IDE 整合功能尤其令人期待。我們在 IDE 中花費了許多時間，而有了這項基準資料，就能更清楚地瞭解開發工作流程，並確保各項工具的一致性。如要進一步瞭解 Baseline 和其他類似的工具整合功能，請前往 Baseline 指南查看更多資源。