# 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-disableeslint-enableeslint-disable-lineeslint-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 (opens new window).
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.
<template>
<!-- eslint-disable-next-line vue/max-attributes-per-line -->
<div a="1" b="2" c="3" d="4" />
</template>
The eslint-disable-like comments can be used in the <template> and in the block level.
<template>
<!-- eslint-disable-next-line vue/max-attributes-per-line -->
<div a="1" b="2" c="3" d="4" />
</template>
<!-- eslint-disable-next-line vue/component-tags-order -->
<style>
</style>
The eslint-disable comments has no effect after one block.
<style>
</style>
<!-- eslint-disable -->
<script> /* <- Warning has been disabled. */
</script>
<template> <!-- <- Warning are not disabled. -->
</template>
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:
<template>
<!-- eslint-disable-next-line vue/max-attributes-per-line -- Here's a description about why this disabling is necessary. -->
<div a="1" b="2" c="3" d="4" />
</template>
# 🔧 Options
{
"vue/comment-directive": ["error", {
"reportUnusedDisableDirectives": false
}]
}
reportUnusedDisableDirectives... Iftrue, to report unusedeslint-disableHTML comments. defaultfalse
# { "reportUnusedDisableDirectives": true }
<template>
<!-- ✓ GOOD -->
<!-- eslint-disable-next-line vue/max-attributes-per-line -->
<div a="1" b="2" c="3" d="4" />
<!-- ✗ BAD -->
<!-- eslint-disable-next-line vue/max-attributes-per-line -->
<div a="1" />
</template>
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