メインコンテンツまでスキップ

HTML以外につかう

プラグインをつかうことで、テンプレートエンジンやフレームワークなどのHTML以外の構文にも適用できます。

プラグインのインストール​

npmもしくはYarnでパーサプラグインをインストールします。

npm install -D @markuplint/pug-parser

構文に独自の仕様がある場合は、パーサプラグインと一緒にスペックプラグインをインストールする必要があります。

npm install -D @markuplint/jsx-parser @markuplint/react-spec
npm install -D @markuplint/vue-parser @markuplint/vue-spec

サポートしている構文​

テンプレートエンジンまたは構文パーサスペック
JSX@markuplint/jsx-parser@markuplint/react-spec
Vue@markuplint/vue-parser@markuplint/vue-spec
Svelte@markuplint/svelte-parser@markuplint/svelte-spec
SvelteKit@markuplint/svelte-parser/kit-
Astro@markuplint/astro-parser-
Alpine.js@markuplint/alpine-parser@markuplint/alpine-parser/spec
HTMX@markuplint/htmx-parser@markuplint/htmx-parser/spec
Pug@markuplint/pug-parser-
PHP@markuplint/php-parser-
Smarty@markuplint/smarty-parser-
eRuby@markuplint/erb-parser-
EJS@markuplint/ejs-parser-
Mustache or Handlebars@markuplint/mustache-parser-
Nunjucks@markuplint/nunjucks-parser-
Liquid@markuplint/liquid-parser-
注記

@markuplint/html-parserというパッケージが存在しますが、コアパッケージに含まれており、インストールや設定ファイルへの指定は必要ありません。

未対応の構文

以下のテンプレートエンジンまたは構文は、複雑な属性記述に対応できていません。

✅ 有効なコード​

<div attr="{{ value }}"></div>
<div attr='{{ value }}'></div>
<div attr="{{ value }}-{{ value2 }}-{{ value3 }}"></div>

❌ 未対応のコード​

クォーテーションで囲われていないコード。

<div attr={{ value }}></div>

プルリクエスト募集中: この問題は、開発者は認識しており、Issue #240として作られています。

プラグインの適用​

設定ファイルのparserプロパティに適用するプラグインを指定します。また、スペックが存在する場合はspecsプロパティにも追加します。parserプロパティのキーに対象ファイル名を特定できる正規表現を設定します。

Reactでつかう
{
  "parser": {
    "\\.jsx$": "@markuplint/jsx-parser"
  },
  "specs": {
    "\\.jsx$": "@markuplint/react-spec"
  }
}
Vueでつかう
{
  "parser": {
    "\\.vue$": "@markuplint/vue-parser"
  },
  "specs": {
    "\\.vue$": "@markuplint/vue-spec"
  }
}

詳しくは、 parserとspecsの説明をご覧ください。

なぜスペックプラグインが必要なのですか​

例えば、ネイティブのHTML要素にはkey属性は存在しませんが、ReactやVueを使うときにはその固有の属性をつかうことがとても多いです。そこで、@markuplint/react-specや@markuplint/vue-specを指定する必要があります。

const Component = ({ list }) => {
  return (
    <ul>
      {list.map(item => (
        <li key={item.key}>{item.text}</li>
      ))}
    </ul>
  );
};
<template>
  <ul>
    <li v-for="item in list" :key="item.key">{{ item.text }}</li>
  </ul>
</template>

これ以外にもスペックプラグインは、それぞれが持つ固有の属性やディレクティブを含んでいます。

プリテンダー（偽装機能）​

ReactやVueなどでは、カスタムコンポーネントをHTML要素として評価ができません。

<List>{/* ネイティブのHTML要素として評価できない */}
  <Item />{/* ネイティブのHTML要素として評価できない */}
  <Item />{/* ネイティブのHTML要素として評価できない */}
  <Item />{/* ネイティブのHTML要素として評価できない */}
</List>

プリテンダー機能はそれを解決します。

コンポーネントとマッチするセレクタと、コンポーネントが公開する要素のプロパティを指定すると、各ルールでコンポーネントをレンダリングされたHTML要素として評価します。

{
  "pretenders": [
    {
      "selector": "List",
      "as": "ul"
    },
    {
      "selector": "Item",
      "as": "li"
    }
  ]
}
<List>{/* <ul>として評価 */}
  <Item />{/* <li>として評価 */}
  <Item />{/* <li>として評価 */}
  <Item />{/* <li>として評価 */}
</List>

必要であれば、設定のpretendersプロパティの詳細を参照してください。

as属性について​

コンポーネントにas属性が指定されている場合、その属性の値として指定された要素として評価されます。

<x-ul as="ul"><!-- <ul> として評価される -->
  <x-li as="li"></x-li><!-- <li> として評価される -->
  <x-li as="li"></x-li><!-- <li> として評価される -->
  <x-li as="li"></x-li><!-- <li> として評価される -->
</x-ul>

これは、コンポーネントから継承された属性に対しても同様に評価されます。

<!-- <img src="image.png" alt="image"> として評価される -->
<x-img src="image.png" alt="image">