Add option to ignore comments in vue/multiline-html-element-content-newline

docs/rules/multiline-html-element-content-newline.md

@@ -82,7 +82,8 @@ This rule enforces a line break before and after the contents of a multiline ele
     "vue/multiline-html-element-content-newline": ["error", {
         "ignoreWhenEmpty": true,
         "ignores": ["pre", "textarea", ...INLINE_ELEMENTS],
-        "allowEmptyLines": false
+        "allowEmptyLines": false,
+        "ignoreComments": false
     }]
 }
 ```
@@ -93,6 +94,8 @@ This rule enforces a line break before and after the contents of a multiline ele
     default `["pre", "textarea", ...INLINE_ELEMENTS]`.
 - `allowEmptyLines` ... if `true`, it allows empty lines around content. If you want to disallow multiple empty lines, use [no-multiple-empty-lines] in combination.  
     default `false`
+- `ignoreComments` ... if `true`, it allows comments to be on the same line as the tag.
+    default `false`
 
 ::: info
   All inline non void elements can be found [here](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/utils/inline-non-void-elements.json).
@@ -143,6 +146,21 @@ This rule enforces a line break before and after the contents of a multiline ele
 
 </eslint-code-block>
 
+### `"ignoreComments": true`
+
+<eslint-code-block fix :rules="{'vue/multiline-html-element-content-newline': ['error', { ignoreComments: true }]}">
+
+```vue
+<template>
+  <!-- ✓ GOOD -->
+  <div class="red">  <!-- or "blue" -->
+    content
+  </div>
+</template>
+```
+
+</eslint-code-block>
+
 ## :books: Further Reading
 
 - [no-multiple-empty-lines]

docs/rules/singleline-html-element-content-newline.md

@@ -58,7 +58,9 @@ This rule enforces a line break before and after the contents of a singleline el
     "ignoreWhenNoAttributes": true,
     "ignoreWhenEmpty": true,
     "ignores": ["pre", "textarea", ...INLINE_ELEMENTS],
-    "externalIgnores": []
+    "externalIgnores": [],
+    "ignoreComments": false
+
   }]
 }
 ```
@@ -71,6 +73,8 @@ This rule enforces a line break before and after the contents of a singleline el
     default `["pre", "textarea", ...INLINE_ELEMENTS]`
 - `externalIgnores` ... the configuration for external element names to ignore line breaks style, it allows avoiding overwrite the default value of ignores.
     default `[]`
+- `ignoreComments` ... if `true`, it allows comments (but not content, including whitespace) on a single line.
+    default `false`
 
 ::: info
   All inline non void elements can be found [here](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/utils/inline-non-void-elements.json).
@@ -110,6 +114,22 @@ This rule enforces a line break before and after the contents of a singleline el
 
 </eslint-code-block>
 
+### `"ignoreComments": true`
+
+<eslint-code-block fix :rules="{'vue/singleline-html-element-content-newline': ['error', {'ignoreComments': true}]}">
+
+```vue
+<template>
+  <!-- ✗ BAD -->
+  <div attr>content</div>
+
+  <!-- ✓ GOOD -->
+  <div attr><!-- comment --></div>
+</template>
+```
+
+</eslint-code-block>
+
 ## :rocket: Version
 
 This rule was introduced in eslint-plugin-vue v5.0.0

lib/rules/multiline-html-element-content-newline.js

@@ -23,7 +23,8 @@ function parseOptions(options) {
     {
       ignores: ['pre', 'textarea', ...INLINE_ELEMENTS],
       ignoreWhenEmpty: true,
-      allowEmptyLines: false
+      allowEmptyLines: false,
+      ignoreComments: false
     },
     options
   )
@@ -80,6 +81,9 @@ module.exports = {
           },
           allowEmptyLines: {
             type: 'boolean'
+          },
+          ignoreComments: {
+            type: 'boolean'
           }
         },
         additionalProperties: false
@@ -98,6 +102,7 @@ module.exports = {
     const ignores = options.ignores
     const ignoreWhenEmpty = options.ignoreWhenEmpty
     const allowEmptyLines = options.allowEmptyLines
+    const ignoreComments = options.ignoreComments
     const sourceCode = context.getSourceCode()
     const template =
       sourceCode.parserServices.getTemplateBodyTokenStore &&
@@ -149,7 +154,7 @@ module.exports = {
          * @type {SourceCode.CursorWithCountOptions}
          */
         const getTokenOption = {
-          includeComments: true,
+          includeComments: !ignoreComments,
           filter: (token) => token.type !== 'HTMLWhitespace'
         }
         if (

lib/rules/singleline-html-element-content-newline.js

@@ -24,7 +24,8 @@ function parseOptions(options) {
       ignores: ['pre', 'textarea', ...INLINE_ELEMENTS],
       externalIgnores: [],
       ignoreWhenNoAttributes: true,
-      ignoreWhenEmpty: true
+      ignoreWhenEmpty: true,
+      ignoreComments: false
     },
     options
   )
@@ -63,6 +64,9 @@ module.exports = {
           ignoreWhenEmpty: {
             type: 'boolean'
           },
+          ignoreComments: {
+            type: 'boolean'
+          },
           ignores: {
             type: 'array',
             items: { type: 'string' },
@@ -92,6 +96,7 @@ module.exports = {
     const ignores = new Set([...options.ignores, ...options.externalIgnores])
     const ignoreWhenNoAttributes = options.ignoreWhenNoAttributes
     const ignoreWhenEmpty = options.ignoreWhenEmpty
+    const ignoreComments = options.ignoreComments
     const sourceCode = context.getSourceCode()
     const template =
       sourceCode.parserServices.getTemplateBodyTokenStore &&
@@ -136,7 +141,7 @@ module.exports = {
 
         /** @type {SourceCode.CursorWithCountOptions} */
         const getTokenOption = {
-          includeComments: true,
+          includeComments: !ignoreComments,
           filter: (token) => token.type !== 'HTMLWhitespace'
         }
         if (

tests/lib/rules/multiline-html-element-content-newline.js

@@ -169,6 +169,15 @@ tester.run('multiline-html-element-content-newline', rule, {
         </template>`,
       options: [{ allowEmptyLines: true }]
     },
+    {
+      code: `
+        <template>
+          <div>  <!-- comment -->
+            contents
+          </div>
+        </template>`,
+      options: [{ allowEmptyLines: true, ignoreComments: true }]
+    },
 
     // self closing
     `
@@ -611,6 +620,25 @@ content
         'Expected 1 line break before closing tag (`</div>`), but no line breaks found.'
       ]
     },
+    {
+      code: `
+        <template>
+          <div>  <!-- comment -->
+            contents
+          </div>
+        </template>`,
+      output: `
+        <template>
+          <div>
+<!-- comment -->
+            contents
+          </div>
+        </template>`,
+      options: [{ allowEmptyLines: true, ignoreComments: false }],
+      errors: [
+        'Expected 1 line break after opening tag (`<div>`), but no line breaks found.'
+      ]
+    },
     // mustache
     {
       code: `

tests/lib/rules/singleline-html-element-content-newline.js

@@ -229,6 +229,19 @@ tester.run('singleline-html-element-content-newline', rule, {
           externalIgnores: ['IgnoreTag']
         }
       ]
+    },
+    // Ignore comments
+    {
+      code: `
+        <template>
+          <div><!-- comment --></div>
+          <div attr><!-- comment --></div>
+        </template>`,
+      options: [
+        {
+          ignoreComments: true
+        }
+      ]
     }
   ],
   invalid: [