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

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"
}
}

詳しくは、 parserspecsの説明をご覧ください。

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

例えば、ネイティブのHTML要素にはkey属性は存在しませんが、ReactVueを使うときにはその固有の属性をつかうことがとても多いです。そこで、@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>

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

プリテンダー(偽装機能)

ReactVueなどでは、カスタムコンポーネントを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">