自定義資料格式：不斷演進的 HTML 和 CSS 語言特性

2020 年 2 月 24 日，作者：Pine Wu, @octref

Web 正在不斷發展，其語言也在隨之演進。新的實體不斷出現在 HTML 和 CSS 規範中。自定義元素（Custom Elements）和 Houdini 允許使用者擴充套件 HTML 和 CSS 語義。如今，許多開發人員使用嵌入 HTML 和 CSS 的程式語言。儘管 HTML 和 CSS 的使用方式越來越靈活，但編輯器對新功能的支援往往滯後。

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

在這篇博文中，我們將解釋這種資料格式，以及使用者和擴充套件作者如何利用它。

使用自定義資料格式

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

HTML and CSS Language Features

藉助自定義資料格式，使用者可以輕鬆定義新的 HTML/CSS 實體，並獲得自動完成、懸停資訊和其他語言功能。

要開始使用，使用者可以編寫一個名為 html.html-data.json 的 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.tw/docs/4.0/components/buttons/"
        }
      ]
    }
  ]
}

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

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

然後您就可以獲得為定義的實體提供的語言功能

Custom Data helloworld

您可以透過在 VS Code 中開啟預配置的自定義資料 hello world 示例來試用此功能。您可以編輯 HTML/CSS 自定義資料檔案，以便新增、刪除或完善自定義實體的定義，並微調語言功能。

html.customData 和 css.customData 設定是使用自定義資料的良好起點。然而，還有其他利用自定義資料的方式。在接下來的部分中，我們將描述擴充套件作者如何共享精選的自定義資料集或利用自定義資料來構建語言支援。

透過擴充套件共享自定義資料

如今，許多 Web 框架都構建在 HTML 之上。例如，Mavo 專案透過各種 mv- 屬性擴充套件了 HTML 語法。自定義資料使其易於支援此類 Web 框架

生成所有 Mavo 屬性的自定義資料。
在 contributes.html.customData 擴充套件貢獻點中指向自定義資料檔案。
釋出擴充套件以幫助其他人在 VS Code 中使用 Mavo 框架。

透過下載 Mavo 擴充套件，使用者可以在 HTML 檔案中獲得所有 Mavo 屬性的自動完成和懸停資訊

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 儲存庫中閱讀有關自定義資料格式的更多資訊，您可以在其中提出問題和功能請求。

編碼愉快！

Pine Wu，VS Code 團隊成員 @octref