に参加して、VS Code の AI 支援開発について学びましょう。

カスタムデータ形式：進化する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で事前に設定されたカスタムデータハローワールドサンプルを開いて、この機能を試すことができます。HTML/CSSカスタムデータファイルを編集して、カスタムエンティティの定義を追加、削除、または改善し、言語機能を微調整することができます。

html.customDataとcss.customDataの設定は、カスタムデータを使用するための良い出発点となります。ただし、カスタムデータを活用する方法は他にもあります。以下のセクションでは、拡張機能の作成者がどのように厳選されたカスタムデータのセットを共有したり、カスタムデータを活用して言語サポートを構築したりできるかについて説明します。

拡張機能によるカスタムデータの共有

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

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

Mavo demo

拡張機能のソースコードは、vscode-mavoリポジトリにあります。このプロジェクトが、VS Codeでウェブフレームワークまたは言語サポートを実装するための出発点となることを願っています。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開発者ネットワーク
  • 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

© . This site is unofficial and not affiliated with Microsoft.