eslint-plugin-vue
eslint-plugin-vue copied to clipboard
vuejs
Rule proposal: `padding-lines-between-tags`
Please describe what the rule should do:
The rule, as demonstrated in https://github.com/vuejs/eslint-plugin-vue/issues/855#issuecomment-538750738 and #1829 should enforce line breaks between HTML tags in template. Not all tags, just siblings.
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:
<!-- GOOD -->
<template>
<div>
<p>Item 1</p>
<p>Item 2</p>
</div>
</template>
<!-- BAD -->
<template>
<div>
<p>Item 1</p>
<p>Item 2</p>
</div>
</template>
<!-- GOOD -->
<template>
<ul>
<li>1</li>
<li>2</li>
<li>
<ul>
<li>3.1</li>
<li>3.2</li>
</ul>
</li>
<li>
<ul>
<li>4.1</li>
</ul>
</li>
</ul>
</template>
<!-- BAD-->
<template>
<ul>
<li>1</li>
<li>2</li>
<li>
<ul>
<li>3.1</li>
<li>3.2</li>
</ul>
</li>
<li>
<ul>
<li>4.1</li>
</ul>
</li>
</ul>
</template>
Additional context
Similar to vue/padding-line-between-blocks https://eslint.vuejs.org/rules/padding-line-between-blocks.html
Thank you for the rule proposal.
I think it's probably better to be able to set options for each element before and after, like padding-line-between-statements. For example, I don't want to have padding before and after <br>.
https://eslint.org/docs/rules/padding-line-between-statements
Agree @ota-meshi. What do you think about "ignores" option where you can specify tags to ignore?
Example: https://eslint.vuejs.org/rules/multiline-html-element-content-newline.html#vue-multiline-html-element-content-newline
Also, here (https://github.com/vuejs/eslint-plugin-vue/issues/1834#issuecomment-1084421621) it's suggested for components, but why not for both with one rule.
@amiranagram That would also be interesting and give crazy flexibility. Like a Regex configuration that you can define
I recommend ignoring elements that are displayed on a single line. Only add blank lines before and after elements that contain child elements, and before and after elements that display attributes on multiple lines. As for whether blank lines are required between parent and child elements, this could also be an optional option.
我建议忽略单行显示的元素。仅在包含子元素的元素前后增加空行，以及多行展示属性的元素前后增加空行。 至于父元素与子元素之间是否需要空行，也可以作为一个可选项。
<template>
<div class="container">
<ul>
<li>
<p>123</p>
<p>123</p>
</li>
<li>
<p>123</p>
<p>123</p>
</li>
<li>
<p>123</p>
<p>123</p>
</li>
<li>
<p>123</p>
<p>123</p>
</li>
<li>
<p>123</p>
<p>123</p>
</li>
</ul>
<p>123</p>
<p>123</p>
<p>123</p>
<!-- Comp1 -->
<Comp1 />
<!-- Comp2 -->
<Comp2 />
<!-- Comp3 -->
<Comp3 />
<!-- Comp4 -->
<Comp4
prop1
prop2
/>
</div>
</template>
