san/comment-directive

support comment-directives in <template>

• ⚙️ This rule is included in all of "plugin:san/base", "plugin:san/essential", "plugin:san/strongly-recommended" and "plugin:san/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 (opens new window).

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

<template> <!-- eslint-disable-next-line san/max-attributes-per-line --> <div a="1" b="2" c="3" d="4" /> </template>

Now loading...

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

<template> <!-- eslint-disable-next-line san/max-attributes-per-line --> <div a="1" b="2" c="3" d="4" /> </template> <!-- eslint-disable-next-line san/component-tags-order --> <style> </style>

Now loading...

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 san/max-attributes-per-line -- Here's a description about why this disabling is necessary. --> <div a="1" b="2" c="3" d="4" /> </template>

Now loading...

🔧 Options

{
  "san/comment-directive": ["error", {
    "reportUnusedDisableDirectives": false
  }]
}

• reportUnusedDisableDirectives ... If true, to report unused eslint-disable HTML comments. default false

{ "reportUnusedDisableDirectives": true }

<template> <!-- ✓ GOOD --> <!-- eslint-disable-next-line san/max-attributes-per-line --> <div a="1" b="2" c="3" d="4" /> <!-- ✗ BAD --> <!-- eslint-disable-next-line san/max-attributes-per-line --> <div a="1" /> </template>

Now loading...

Note

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

📚 Further Reading

• Disabling rules with inline comments (opens new window)

🔍 Implementation

• Rule source (opens new window)
• Test source (opens new window)