Skip to content

vue/comment-directive

support comment-directives in <template>

  • ⚙️ This rule is included in all of "plugin:vue/base", "plugin:vue/essential", "plugin:vue/vue3-essential", "plugin:vue/strongly-recommended", "plugin:vue/vue3-strongly-recommended", "plugin:vue/recommended" and "plugin:vue/vue3-recommended".

Sole purpose of this rule is to provide eslint-disable functionality in the <template> and in the block level. It supports usage of the following comments:

  • eslint-disable
  • eslint-enable
  • eslint-disable-line
  • eslint-disable-next-line

Note

We can't write HTML comments in tags.

📖 Rule Details

ESLint doesn't provide any API to enhance eslint-disable functionality and ESLint rules cannot affect other rules. But ESLint provides processors API.

This rule sends all eslint-disable-like comments as errors to the post-process of the .vue file processor, then the post-process removes all vue/comment-directive errors and the reported errors in disabled areas.

Now loading...

The eslint-disable-like comments can be used in the <template> and in the block level.

Now loading...

The eslint-disable comments has no effect after one block.

Now loading...

The eslint-disable-like comments can include descriptions to explain why the comment is necessary. The description must occur after the directive and is separated from the directive by two or more consecutive - characters. For example:

Now loading...

🔧 Options

json
{
  "vue/comment-directive": ["error", {
    "reportUnusedDisableDirectives": false
  }]
}
  • reportUnusedDisableDirectives ... If true, to report unused eslint-disable HTML comments. default false

{ "reportUnusedDisableDirectives": true }

Now loading...

Note

Unused reports cannot be suppressed with eslint-disable HTML comments.

📚 Further Reading

🚀 Version

This rule was introduced in eslint-plugin-vue v4.1.0

🔍 Implementation