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

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:

• PHP
• Smarty
• eRuby
• EJS
• Mustache/Handlebars
• Nunjucks
• Liquid

✅ 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>