eslint-plugin-vue

# vue/html-comment-content-newline

enforce unified line brake in HTML comments

# 📖 Rule Details

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

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

# 🔧 Options

{
  "vue/html-comment-content-newline": ["error",
    {
      "singleline": "always" | "never" | "ignore",
      "multiline": "always" | "never" | "ignore",
    },
    {
      "exceptions": []
    }
  ]
}

  • The first option is either an object with "singleline" and "multiline" keys.

    • singleline ... the configuration for single-line comments.
      • "never" (default) ... disallow line breaks after the <!-- and before the -->.
      • "always" ... require one line break after the <!-- and before the -->.
    • multiline ... the configuration for multiline comments.
      • "never" ... disallow line breaks after the <!-- and before the -->.
      • "always" (default) ... require one line break after the <!-- and before the -->.

    You can also set the same value for both singleline and multiline by specifies a string.

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

# "always"

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

# "never"

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

# {"singleline": "always", "multiline": "ignore"}

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

# {"singleline": "ignore", "multiline": "always"}

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

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

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

# 🚀 Version

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

# 🔍 Implementation

← vue/html-comment-content-spacing →