Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
dsl101 wants to merge 5 commits into vuejs:master from dsl101:ignore-comments
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 19 additions & 1 deletion docs/rules/multiline-html-element-content-newline.md
View file Open in desktop
Copy link
Member

@FloEdelmann FloEdelmann Oct 24, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

By the way, while you're at it: Could you please add a "Related rules" section here and link to vue/singleline-html-element-content-newline from this rule docs page?

And also vice-versa a link from vue/singleline-html-element-content-newline to vue/multiline-html-element-content-newline.

EDIT: I've done that now in #2911.

Note: the following comments are replies to #2581 (comment) rather than this comment.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, since comments are ignored, you would almost always want allowEmptyLines: true since it's not clear how many empty lines you'll have. I couldn't see an easy way around that.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd love to spend more time digging in, but I'm afraid I have to get back to the project I'm using this on! I guess I'll just have to disable those rules for now...

Copy link
Member

@FloEdelmann FloEdelmann Aug 1, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@dsl101 Do you think you'll get to this PR at some point? Or should we close it and let someone else start fresh?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, I would love to, but I'm really not sure when. I guess there have been plenty of other changes since I started on this, and I'd need to refresh my memory or just start over with a better design given where this got to.

If someone else is keen, that's probably the best bet.

FloEdelmann reacted with thumbs up emoji
Original file line number Diff line number Diff line change
Expand Up @@ -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
}]
}
```
Expand All @@ -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).
Expand Down Expand Up @@ -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]
Expand Down
22 changes: 21 additions & 1 deletion docs/rules/singleline-html-element-content-newline.md
View file Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

}]
}
```
Expand All @@ -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).
Expand Down Expand Up @@ -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
Expand Down
9 changes: 7 additions & 2 deletions lib/rules/multiline-html-element-content-newline.js
View file Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,8 @@ function parseOptions(options) {
{
ignores: ['pre', 'textarea', ...INLINE_ELEMENTS],
ignoreWhenEmpty: true,
allowEmptyLines: false
allowEmptyLines: false,
ignoreComments: false
},
options
)
Expand Down Expand Up @@ -80,6 +81,9 @@ module.exports = {
},
allowEmptyLines: {
type: 'boolean'
},
ignoreComments: {
type: 'boolean'
}
},
additionalProperties: false
Expand All @@ -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 &&
Expand Down Expand Up @@ -149,7 +154,7 @@ module.exports = {
* @type {SourceCode.CursorWithCountOptions}
*/
const getTokenOption = {
includeComments: true,
includeComments: !ignoreComments,
filter: (token) => token.type !== 'HTMLWhitespace'
}
if (
Expand Down
9 changes: 7 additions & 2 deletions lib/rules/singleline-html-element-content-newline.js
View file Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,8 @@ function parseOptions(options) {
ignores: ['pre', 'textarea', ...INLINE_ELEMENTS],
externalIgnores: [],
ignoreWhenNoAttributes: true,
ignoreWhenEmpty: true
ignoreWhenEmpty: true,
ignoreComments: false
},
options
)
Expand Down Expand Up @@ -63,6 +64,9 @@ module.exports = {
ignoreWhenEmpty: {
type: 'boolean'
},
ignoreComments: {
type: 'boolean'
},
ignores: {
type: 'array',
items: { type: 'string' },
Expand Down Expand Up @@ -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 &&
Expand Down Expand Up @@ -136,7 +141,7 @@ module.exports = {

/** @type {SourceCode.CursorWithCountOptions} */
const getTokenOption = {
includeComments: true,
includeComments: !ignoreComments,
filter: (token) => token.type !== 'HTMLWhitespace'
}
if (
Expand Down
28 changes: 28 additions & 0 deletions tests/lib/rules/multiline-html-element-content-newline.js
View file Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
`
Expand Down Expand Up @@ -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: `
Expand Down
13 changes: 13 additions & 0 deletions tests/lib/rules/singleline-html-element-content-newline.js
View file Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: [
Expand Down
Loading

AltStyle によって変換されたページ (->オリジナル) /