JS.VUE.HTML.COMMENT.CONTENT.SPACING

Enforce unified spacing in HTML comments

Rule Details

This rule will enforce consistency of spacing after the <!-- and before the --> of comment. It also provides several exceptions for various documentation styles.

Whitespace after the <!-- and before the --> makes it easier to read text in comments.

{'vue/html-comment-content-spacing': ['error']}

Copy
<template>
  <!-- GOOD -->
  <!-- comment -->
  <!--
    comment
  -->

  <!-- BAD-->
  <!--comment-->
</template>

Options

Copy
{
  "vue/html-comment-content-spacing": ["error",
    "always" | "never",
    {
      "exceptions": []
    }
  ]
}
  • The first is a string which be either "always" or "never". The default is "always".
  • "always" (default) ... there must be at least one whitespace at after the <!-- and before the -->.
  • "never" ... there should be no whitespace at after the <!-- and before the -->.

  • This rule can also take a 2nd option, an object with the following key: "exceptions".

  • The "exceptions" value is an array of string patterns which are considered exceptions to the rule. Please note that exceptions are ignored if the first argument is "never".
Copy
  "vue/html-comment-content-spacing": ["error", "always", { "exceptions": ["*"] }]

"always"

{'vue/html-comment-content-spacing': ['error', 'always']}

Copy
<template>
  <!-- GOOD -->

  <!-- BAD-->
</template>

"never"

{'vue/html-comment-content-spacing': ['error', 'never']}

Copy
<template>
  <!-- GOOD-->

  <!-- BAD -->
  <!--       comment      -->
</template>

"always", { "exceptions": ["*"] }

{'vue/html-comment-content-spacing': ['error', 'always', { 'exceptions': ['*'] }]}

Copy
<template>
  <!-- GOOD -->
  <!--*******
    comment
    *******-->

  <!--******* BAD*******-->
</template>

The content on this page is adapted from the ESLint User Guide. Copyright © OpenJS Foundation and other contributors, www.openjsf.org. All rights reserved. https://eslint.org/docs/rules/