カスタムデータ形式：進化する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

この機能を試すには、事前構成済みのカスタムデータ Hello World サンプルをVS Codeで開いてください。HTML/CSSカスタムデータファイルを編集して、カスタムエンティティの定義を追加、削除、または改良し、言語機能を微調整できます。

html.customDataおよびcss.customData設定は、カスタムデータの使用を開始するのに適しています。ただし、カスタムデータを活用する方法は他にもあります。次のセクションでは、拡張機能の作成者がキュレーションされたカスタムデータのセットを共有したり、カスタムデータを活用して言語サポートを構築する方法について説明します。

拡張機能を通じたカスタムデータの共有

今日、多くのウェブフレームワークがHTMLの上に構築されています。たとえば、Mavoプロジェクトは、さまざまなmv-属性でHTML構文を拡張します。カスタムデータを使用すると、このようなウェブフレームワークを簡単にサポートできます。

すべてのMavo属性のカスタムデータを生成します。
contributes.html.customData拡張機能のContribution Pointでカスタムデータファイルを指定します。
拡張機能を公開して、他の人がVS CodeでMavoフレームワークを使用できるようにします。

Mavo拡張機能をダウンロードすると、ユーザーはHTMLファイル内のすべてのMavo属性のオートコンプリートとホバー情報を取得できます。

Mavo demo

拡張機能のソースコードは、vscode-mavoリポジトリにあります。このプロジェクトが、VS Codeでウェブフレームワークまたは言語サポートを実装するための出発点となることを願っています。contributes.html.customDataおよびcontributes.css.customData Contribution Pointの詳細については、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チームは、ウェブ言語に優れた編集エクスペリエンスを提供することに取り組んでいます。カスタムデータ形式を通じて、私たちは最新のHTMLおよびCSS言語機能に密接に対応し、ユーザーと拡張機能の作成者がHTMLおよびCSS編集エクスペリエンスをカスタマイズするためのシンプルなインターフェースを提供します。

Simple interface

カスタムデータ形式の詳細については、vscode-custom-dataリポジトリをご覧ください。ここでは、課題や機能リクエストをオープンできます。

ハッピーコーディング！

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