eslint-plugin-vue

Appearance

vue/html-comment-content-spacing ​

enforce unified spacing in HTML comments

  • 🔧 The --fix option on the command line can automatically fix some of the problems reported by this rule.

📖 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.

<template> <!-- ✓ GOOD --> <!-- comment --> <!-- comment --> <!--✗ BAD--> <!--comment--> </template>
Now loading...

🔧 Options ​

json
{
  "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".
    json
    "vue/html-comment-content-spacing": ["error", "always", { "exceptions": ["*"] }]

"always" ​

<template> <!-- ✓ GOOD --> <!--✗ BAD--> </template>
Now loading...

"never" ​

<template> <!--✓ GOOD--> <!-- ✗ BAD --> <!-- comment --> </template>
Now loading...

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

<template> <!-- ✓ GOOD --> <!--******* comment *******--> <!--*******✗ BAD*******--> </template>
Now loading...

🚀 Version ​

This rule was introduced in eslint-plugin-vue v7.0.0

🔍 Implementation ​