HTML以外につかう
プラグインをつかうことで、テンプレートエンジンやフレームワークなどのHTML以外の構文にも適用できます。
プラグインのインストール
npmもしくはYarnでパーサプラグインをインストールします。
- npm
- Yarn
- pnpm
npm install -D @markuplint/pug-parser
yarn add --dev @markuplint/pug-parser
pnpm add -D @markuplint/pug-parser
構文に独自の仕様がある場合は、パーサプラグインと一緒にスペックプラグインをインストールする必要があります。
- npm
- Yarn
- pnpm
npm install -D @markuplint/jsx-parser @markuplint/react-spec
yarn add --dev @markuplint/jsx-parser @markuplint/react-spec
pnpm add -D @markuplint/jsx-parser @markuplint/react-spec
- npm
- Yarn
- pnpm
npm install -D @markuplint/vue-parser @markuplint/vue-spec
yarn add --dev @markuplint/vue-parser @markuplint/vue-spec
pnpm add -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
というパッケージが存在しますが、コアパッケージに含まれており、インストールや設定ファイルへの指定は必要ありません。
プラグインの適用
設定ファイルのparser
プロパティに適用するプラグインを指定します。また、スペックが存在する場合はspecs
プロパティにも追加します。parser
プロパティのキーに対象ファイル名を特定できる正規表現を設定します。
{
"parser": {
"\\.jsx$": "@markuplint/jsx-parser"
},
"specs": {
"\\.jsx$": "@markuplint/react-spec"
}
}
{
"parser": {
"\\.vue$": "@markuplint/vue-parser"
},
"specs": {
"\\.vue$": "@markuplint/vue-spec"
}
}
なぜスペックプラグインが必要なのですか
例えば、ネイティブの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">