⚙️ This rule is included in all of "plugin:vue/base", *.configs["flat/base"], "plugin:vue/vue2-essential", *.configs["flat/vue2-essential"], "plugin:vue/essential", *.configs["flat/essential"], "plugin:vue/vue2-strongly-recommended", *.configs["flat/vue2-strongly-recommended"], "plugin:vue/strongly-recommended", *.configs["flat/strongly-recommended"], "plugin:vue/vue2-recommended", *.configs["flat/vue2-recommended"], "plugin:vue/recommended" and *.configs["flat/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 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.
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>
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:
<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>
vue/comment-directive
"plugin:vue/base"
,*.configs["flat/base"]
,"plugin:vue/vue2-essential"
,*.configs["flat/vue2-essential"]
,"plugin:vue/essential"
,*.configs["flat/essential"]
,"plugin:vue/vue2-strongly-recommended"
,*.configs["flat/vue2-strongly-recommended"]
,"plugin:vue/strongly-recommended"
,*.configs["flat/strongly-recommended"]
,"plugin:vue/vue2-recommended"
,*.configs["flat/vue2-recommended"]
,"plugin:vue/recommended"
and*.configs["flat/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 allvue/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
reportUnusedDisableDirectives
... Iftrue
, to report unusedeslint-disable
HTML 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
🔍 Implementation