カスタムデータ形式: 進化するHTMLとCSSの言語機能

2020年2月24日 by Pine Wu, @octref

Webは進化し、その言語も進化します。HTMLとCSSの仕様には、新しいエンティティが次々と追加されています。カスタム要素や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://bootstrap.dokyumento.jp/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フレームワークや言語サポートを実装する際の出発点となることを願っています。contributes.html.customDataとcontributes.css.customDataコントリビューションポイントに関する詳細は、vscode-custom-dataで確認できます。

言語サーバーでのカスタムデータの使用

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 Developer Network
Mozillaのmdn-dataパッケージとmdn-browser-compat-dataパッケージ
ChromeによるCSSプロパティ使用状況のランキング

私たちはこのデータセットをNPMに公開しました。このデータはGitHubでも見つけることができます。言語サーバーの作者は、このデータセットを私たちのHTML/CSS言語サービスと組み合わせて、HTML/CSSを拡張または埋め込む言語のサポートを実装したり、PugやStylusのようにHTML/CSSにトランスパイルされる言語のサポートを実装したりできます。私たちは、VS Codeで最新のHTML/CSS言語サポートを提供するために、このデータセットを継続的に管理していきます。

まとめ

VS Codeチームは、Web言語に対して優れた編集体験を提供することに尽力しています。カスタムデータ形式を通じて、私たちは最新のHTMLとCSSの言語機能に密接に対応し、ユーザーと拡張機能の作者がHTMLとCSSの編集体験をカスタマイズするためのシンプルなインターフェースを提供します。

Simple interface

カスタムデータ形式についての詳細はvscode-custom-dataリポジトリで確認できます。Issueの報告や機能リクエストもこちらで受け付けています。

ハッピーコーディング！

Pine Wu, VS Code チームメンバー @octref