自訂資料格式：不斷演進的 HTML 和 CSS 語言功能

2020 年 2 月 24 日，Pine Wu，@octref

網路不斷演進，其語言亦然。新的實體持續在 HTML 和 CSS 規格中出現。自訂元素和 Houdini 讓使用者能夠擴充 HTML 和 CSS 語意。現今許多開發人員使用內嵌 HTML 和 CSS 的程式設計語言。雖然 HTML 和 CSS 的使用方式日益彈性，但編輯器對新功能的支援通常會落後。

為了讓 Visual Studio Code 中的 HTML 和 CSS 語言支援現代化，我們設計了自訂資料格式，這是一種宣告式 JSON 格式，用於描述 HTML 和 CSS 實體。VS Code 的 HTML 和 CSS 語言伺服器可以讀取以這種格式定義的資料，並為新定義的 HTML 和 CSS 實體提供語言支援。

在這篇部落格文章中，我們將說明資料格式，以及使用者和擴充功能作者如何善用它。

使用自訂資料格式

VS Code 在自動完成和hover資訊中提供關於 HTML/CSS 實體的資訊

HTML and CSS Language Features

透過自訂資料格式，使用者可以輕鬆定義新的 HTML/CSS 實體，並取得自動完成、hover 資訊和其他語言功能。

若要開始使用，使用者可以撰寫 JSON 檔案 html.html-data.json

{
  "version": 1.1,
  "tags": [
    {
      "name": "my-button",
      "description": "My button. You should use it as in `<my-button type='alert'></mybutton>`.",
      "references": [
        {
          "name": "Bootstrap buttons",
          "url": "https://bootstrap.dev.org.tw/docs/4.0/components/buttons/"
        }
      ]
    }
  ]
}

然後在您的使用者或工作區設定中定義指向該資料檔案的 html.customData 值

{
  "html.customData": ["./html.html-data.json"]
}

接著，您將取得已定義實體的語言功能

Custom Data helloworld

您可以透過在 VS Code 中開啟預先設定的 Custom Data hello world 範例來試用此功能。您可以編輯 HTML/CSS 自訂資料檔案，以便新增、移除或精簡自訂實體的定義，並微調語言功能。

html.customData 和 css.customData 設定是開始使用自訂資料的好起點。不過，還有其他方法可以善用自訂資料。在以下章節中，我們將說明擴充功能作者如何共用精選的自訂資料集，或利用自訂資料來建置語言支援。

透過擴充功能共用自訂資料

現今，許多 Web 架構都建立在 HTML 之上。例如，Mavo 專案使用各種 mv- 屬性來擴充 HTML 語法。自訂資料讓支援這類 Web 架構變得容易

為所有 Mavo 屬性產生自訂資料。
在 contributes.html.customData 擴充功能貢獻點中指向自訂資料檔案。
發佈擴充功能，以協助其他人在 VS Code 中使用 Mavo 架構。

透過下載 Mavo 擴充功能，使用者即可在 HTML 檔案中取得所有 Mavo 屬性的自動完成和hover資訊

Mavo demo

擴充功能的原始程式碼位於 vscode-mavo 存放庫。我們希望此專案能作為在 VS Code 中實作 Web 架構或語言支援的起點。您可以在 vscode-custom-data 找到更多關於 contributes.html.customData 和 contributes.css.customData 貢獻點的資訊。

將自訂資料用於語言伺服器

vscode-html-languageservice 和 vscode-css-languageservice 程式庫讓擴充功能作者能夠輕鬆地為擴充或內嵌 HTML 和 CSS 的語言實作語言伺服器。最近，我們新增了一個用於載入自訂資料的 API

import { getLanguageService } from 'vscode-html-languageservice'

getLanguageService({
  customDataProviders: [...]
})

我們內建的 HTML 語言伺服器利用此 API 來載入我們從各種來源收集的精選自訂資料集

HTML、CSS 和 WAI-ARIA 的 W3C 規格
Mozilla 開發人員網路
Mozilla 的 mdn-data 和 mdn-browser-compat-data 套件
Chrome 的 CSS 屬性使用量排名

我們已將此資料集發佈到 NPM。您也可以在 GitHub 上找到資料。語言伺服器作者可能會將此資料集與我們的 HTML/CSS 語言服務結合使用，以實作對擴充或內嵌 HTML/CSS 的語言的支援，或者他們可以使用此資料來實作對轉譯為 HTML/CSS 的語言 (例如 Pug 或 Stylus) 的支援。最後，我們將繼續精選此資料集，以便在 VS Code 中為 HTML/CSS 提供最新的語言支援。

摘要

VS Code 團隊致力於為 Web 語言提供良好的編輯體驗。透過自訂資料格式，我們與最新的 HTML 和 CSS 語言功能保持密切聯繫，並為使用者和擴充功能作者提供一個簡單的介面來自訂他們的 HTML 和 CSS 編輯體驗。

Simple interface

您可以在 vscode-custom-data 存放庫中閱讀更多關於自訂資料格式的資訊，您可以在該處開啟問題和功能要求。

Coding 愉快！

Pine Wu，VS Code 團隊成員 @octref