自定義資料格式：改進 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 語言支援與時俱進，我們設計了自定義資料格式，這是一種用於描述 HTML 和 CSS 實體的宣告式 JSON 格式。VS Code 的 HTML 和 CSS 語言伺服器可以讀取以此格式定義的資料，併為新定義的 HTML 和 CSS 實體提供語言支援。

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

使用自定義資料格式

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

HTML and CSS Language Features

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

首先，使用者可以編寫一個 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://getbootstrap.com/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 貢獻點 (Contribution Point) 中指向該自定義資料檔案。
釋出擴充套件，以幫助其他人在 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 載入了一套我們從各種來源收集的精選自定義資料

W3C 的 HTML、CSS 和 WAI-ARIA 規範
Mozilla Developer Network
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