Setting for other languages
Install plugins for a language
Install the parser plugin through NPM or Yarn:
$ npm install -D @markuplint/pug-parser
# or
$ yarn add -D @markuplint/pug-parser
If a language has its own specification you should install the spec plugin with the parser plugin:
$ npm install -D @markuplint/jsx-parser @markuplint/react-spec
# or
$ yarn add -D @markuplint/jsx-parser @markuplint/react-spec
$ npm install -D @markuplint/vue-parser @markuplint/vue-spec
# or
$ yarn add -D @markuplint/vue-parser @markuplint/vue-spec
Supported languages
Lang | Parser | Spec |
---|---|---|
Pug | @markuplint/pug-parser | - |
JSX (React etc... | @markuplint/jsx-parser | @markuplint/react-spec |
Vue | @markuplint/vue-parser | @markuplint/vue-spec |
Svelte | @markuplint/svelte-parser | - |
Astro | @markuplint/astro-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 | - |
There is @markuplint/html-parser
package but the core package includes it.
You don't need to specify it.
Set to the configuration file
Set about the plugin to the parser
option on the configuration file.
And If it has spec add to the specs
option.
Set a regular expression that can identify the target file name to the parser
option key.
If you use React.
{
"parser": {
".jsx$": "@markuplint/jsx-parser"
},
"specs": ["@markuplint/react-spec"]
}
{
"parser": {
".vue$": "@markuplint/vue-parser"
},
"specs": ["@markuplint/vue-spec"]
}
For example, if allow the key
attribute you need @markuplint/react-spec
or @markuplint/vue-spec
because it is not allowed through HTML 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>
There is @markuplint/html-spec
package but the core package includes it.
You don't need to specify it.
Note: Unsupported syntax
Unsupported the syntax that is complex on the attribute value in some languages:
✅ Available code:
<div attr="{{ value }}"></div>
<div attr='{{ value }}'></div>
<div attr="{{ value }}-{{ value2 }}-{{ value3 }}"></div>
❌ Unavailable code:
Didn't nest by quotations.
<div attr={{ value }}></div>
Mixed the tags and spaces.
<div attr=" {{ value }} "></div>
<div attr="{{ value }} {{ value2 }}"></div>