JS.VUE.HTML.COMMENT.CONTENT.NEWLINE

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.

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

<template>
  <!-- GOOD -->
  <!-- singleline comment -->
  <!--
    multiline
    comment
  -->

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

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"

{'vue/html-comment-content-newline': ['error', { 'singleline': 'always', 'multiline': 'always' }]}

<template>
  <!--
    GOOD
  -->
  <!--
    singleline comment
  -->
  <!--
    multiline
    comment
  -->

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

"never"

{'vue/html-comment-content-newline': ['error', { 'singleline': 'never', 'multiline': 'never' }]}

<template>
  <!-- GOOD -->
  <!-- singleline comment -->
  <!-- multiline
    comment -->

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

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

{'vue/html-comment-content-newline': ['error', { 'singleline': 'always', 'multiline': 'ignore' }]}

<template>
  <!--
    GOOD
  -->
  <!--
    singleline comment
  -->
  <!--

    singleline comment

  -->
  <!-- multiline
    comment -->
  <!--
    multiline
    comment
  -->
  <!--

    multiline
    comment

  -->

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

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

{'vue/html-comment-content-newline': ['error', { 'singleline': 'ignore', 'multiline': 'always' }]}

<template>
  <!-- GOOD -->
  <!--
    multiline
    comment
  -->
  <!--

    multiline
    comment

  -->
  <!-- singleline comment -->
  <!--
    singleline comment
  -->
  <!--

    singleline comment

  -->

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

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

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

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

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