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
プロパティのキーに対象ファイル名を特定できる正規表現を設定します。
Reactでつかう
{
"parser": {
"\\.jsx$": "@markuplint/jsx-parser"
},
"specs": {
"\\.jsx$": "@markuplint/react-spec"
}
}
Vueでつかう
{
"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>
プリテンダー機能はそれを解決します。
コンポーネントとマッチするセレクタ