Using a custom html-validate rule

[Axel3005]

Hello,

I would like to use html-validate custom rule (https://html-validate.org/dev/writing-rules.html), but i don't know how to call it on my plugins options. I'm using Nuxt 2.15.3.

My plugin options are :

htmlValidator: {
    usePrettier: false,
    options: {
      extends: [
        'html-validate:recommended',
      ],
      rules: {
        "custom-rule": "error",
        "no-raw-characters": "warn",
        "unrecognized-char-ref": "warn",
        'attr-quotes': ['warn', {
          "style": "auto"
        }],
        'heading-level': 'off',
        'input-missing-label': 'off',
        'element-required-attributes': 'off',
        'element-permitted-content': "off"
      }
    }
  }

My custom rule is created on my project root, but on build i have an error 'Definition for rule was not found'. It seems looking for an html-validate rule and not my custom rule :

Didn't see anything about custom rule on the plugin documentation, if you have any clue it will be greatly appreciated

Thanks,
Axel

[ext]

To add custom rules you must create a plugin with the rule definitions.

Something similar to

/* CustomRule is a class inheriting from Rule, as per documentation */
const CustomRule = require("./rules/my-rule.js");

/* plugin which adds the "my-prefix/custom-rule" definition */
module.exports = {
  rules: {
    "my-prefix/custom-rule": AnotherRule,
  },
};

The plugin would be added like this:

       extends: [
         'html-validate:recommended',
       ],
+      plugins: [
+        "my-plugin" // npm package or local path
+      ],
       rules: {
-        "custom-rule": "error",
+        "my-prefix/custom-rule": "error",
         "no-raw-characters": "warn",