vue/html-self-closing-bracket-newline #1794

olemarius · 2022-02-08T09:34:38Z

Please describe what the rule should do:

I'd like to set multiline: 'always' for self-closing tags

<MyComp
    :foo="bar"
/>

And singleline: 'never'

<MyComp :foo="bar" />

And multiline: 'never' for tags with content.

<MyComp
    :foo="bar">
    Hello World
</MyComp>

What category should the rule belong to?

[x] Enforces code style (layout)
[ ] Warns about a potential error (problem)
[ ] Suggests an alternate way of doing something (suggestion)
[ ] Other (please specify:)

Provide 2-3 code examples that this rule should warn about:

// singleline: 'never'
<MyComp :foo="bar"
/>
// multiline: 'always'    
<MyComp 
  :foo="bar" />

Additional context

ota-meshi · 2022-02-08T09:53:53Z

Thank you for the rule proposal.
The rule you suggested should be an option for the existing rule vue/html-closing-bracket-newline. Otherwise, the rules will conflict.
https://eslint.vuejs.org/rules/html-closing-bracket-newline.html

I think it would be nice to add an option like selfClosingTag.

<!-- { "selfClosingTag": { "singleline": "never" } } -->
<!-- ✗ BAD -->
<MyComp :foo="bar"
/>
<!-- ✓ GOOD -->
<MyComp :foo="bar"/>
<!-- { "selfClosingTag": { "multiline": "always" } } -->
<!-- ✗ BAD -->
<MyComp 
  :foo="bar" />
<!-- ✓ GOOD -->
<MyComp 
  :foo="bar"
/>

ota-meshi added enhancement good first issue help wanted labels Feb 8, 2022

vuejs / eslint-plugin-vue Public

vue/html-self-closing-bracket-newline #1794

vue/html-self-closing-bracket-newline #1794

olemarius commented Feb 8, 2022

ota-meshi commented Feb 8, 2022

vuejs / eslint-plugin-vue Public

vue/html-self-closing-bracket-newline #1794

vue/html-self-closing-bracket-newline #1794

Comments

olemarius commented Feb 8, 2022

ota-meshi commented Feb 8, 2022