HTML以外につかう
プラグインをつかうことで、HTML以外の構文にも適用できます。
プラグインのインストール
npmもしくはYarnでパーサプラグインをインストールします。
- npm
- Yarn
npm install -D @markuplint/pug-parser
yarn add -D @markuplint/pug-parser
構文に独自の仕様がある場合は、パーサプラグインと一緒にスペックプラグインをインストールする必要があります。
- npm
- Yarn
npm install -D @markuplint/jsx-parser @markuplint/react-spec
yarn add -D @markuplint/jsx-parser @markuplint/react-spec
- npm
- Yarn
npm install -D @markuplint/vue-parser @markuplint/vue-spec
yarn 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 | - |
Astro | @markuplint/astro-parser | - |
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>
タグとスペースが混在しているコード。
<div attr=" {{ value }} "></div>
<div attr="{{ value }} {{ value2 }}"></div>
プルリクエスト募集中: この問題は、開発者は認識しており、Issue #240として作られています。
プラグインの適用
設定ファイルの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
プロパティの詳細を参照してください。