カスタムデータフォーマット: 進化するHTMLとCSSの言語機能

2020年2月24日 Pine Wu、@octref

ウェブは進化し、それに伴いその言語も進化しています。新しいエンティティが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リポジトリを参照してください。ここでは、課題や機能リクエストをオープンすることができます。

ハッピーコーディング！

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