Skip to content

Add consistent option to vue/padding-line-between-tags #1982

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.

Sign up for GitHub

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

Merged
merged 5 commits into from
Sep 30, 2022
Merged

Add consistent option to vue/padding-line-between-tags #1982

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
a851dfb
Add consistent rule
dev1437 Sep 19, 2022
313fa31
Make consistent only considers blocks with consistent rule
dev1437 Sep 23, 2022
49ee311
Use first element as guide for rest of siblings
dev1437 Sep 28, 2022
dec62e3
Simplify logic
dev1437 Sep 29, 2022
e219902
Remove unused
dev1437 Sep 29, 2022
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
151 changes: 90 additions & 61 deletions lib/rules/padding-line-between-tags.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,44 +24,75 @@ function splitLines(text) {
* @param {RuleContext} context
* @param {VElement} tag
* @param {VElement} sibling
* @param {number} lineDifference
*/
function insertNewLine(context, tag, sibling) {
context.report({
messageId: 'always',
loc: sibling.loc,
// @ts-ignore
fix(fixer) {
return fixer.insertTextAfter(tag, '\n')
}
})
function insertNewLine(context, tag, sibling, lineDifference) {
const endTag = tag.endTag || tag.startTag

if (lineDifference === 1) {
context.report({
messageId: 'always',
loc: sibling.loc,
// @ts-ignore
fix(fixer) {
return fixer.insertTextAfter(tag, '\n')
}
})
} else if (lineDifference === 0) {
context.report({
messageId: 'always',
loc: sibling.loc,
// @ts-ignore
fix(fixer) {
const lastSpaces = /** @type {RegExpExecArray} */ (
/^\s*/.exec(context.getSourceCode().lines[endTag.loc.start.line - 1])
)[0]

return fixer.insertTextAfter(endTag, `\n\n${lastSpaces}`)
}
})
}
}

/**
* @param {RuleContext} context
* @param {VEndTag | VStartTag} endTag
* @param {VElement} sibling
* @param {number} lineDifference
*/
function removeExcessLines(context, endTag, sibling) {
context.report({
messageId: 'never',
loc: sibling.loc,
// @ts-ignore
fix(fixer) {
const start = endTag.range[1]
const end = sibling.range[0]
const paddingText = context.getSourceCode().text.slice(start, end)
const textBetween = splitLines(paddingText)
let newTextBetween = `\n${textBetween.pop()}`
for (let i = textBetween.length - 1; i >= 0; i--) {
if (!/^\s*$/.test(textBetween[i])) {
newTextBetween = `${i === 0 ? '' : '\n'}${
textBetween[i]
}${newTextBetween}`
function removeExcessLines(context, endTag, sibling, lineDifference) {
if (lineDifference > 1) {
let hasOnlyTextBetween = true
for (
let i = endTag.loc.start.line;
i < sibling.loc.start.line - 1 && hasOnlyTextBetween;
i++
) {
hasOnlyTextBetween = !/^\s*$/.test(context.getSourceCode().lines[i])
}
if (!hasOnlyTextBetween) {
context.report({
messageId: 'never',
loc: sibling.loc,
// @ts-ignore
fix(fixer) {
const start = endTag.range[1]
const end = sibling.range[0]
const paddingText = context.getSourceCode().text.slice(start, end)
const textBetween = splitLines(paddingText)
let newTextBetween = `\n${textBetween.pop()}`
for (let i = textBetween.length - 1; i >= 0; i--) {
if (!/^\s*$/.test(textBetween[i])) {
newTextBetween = `${i === 0 ? '' : '\n'}${
textBetween[i]
}${newTextBetween}`
}
}
return fixer.replaceTextRange([start, end], `${newTextBetween}`)
}
}
return fixer.replaceTextRange([start, end], `${newTextBetween}`)
})
}
})
}
}

// ------------------------------------------------------------------------------
Expand All @@ -72,7 +103,7 @@ function removeExcessLines(context, endTag, sibling) {
* @param {RuleContext} context
*/
function checkNewline(context) {
/** @type {Array<{blankLine: "always" | "never", prev: string, next: string}>} */
/** @type {Array<{blankLine: "always" | "never" | "consistent", prev: string, next: string}>} */
const configureList = context.options[0] || [
{ blankLine: 'always', prev: '*', next: '*' }
]
Expand Down Expand Up @@ -109,40 +140,38 @@ function checkNewline(context) {
const lineDifference =
closestSibling.loc.start.line - endTag.loc.end.line
if (configure.blankLine === 'always') {
if (lineDifference === 1) {
insertNewLine(context, block, closestSibling)
} else if (lineDifference === 0) {
context.report({
messageId: 'always',
loc: closestSibling.loc,
// @ts-ignore
fix(fixer) {
const lastSpaces = /** @type {RegExpExecArray} */ (
/^\s*/.exec(
context.getSourceCode().lines[endTag.loc.start.line - 1]
)
)[0]

return fixer.insertTextAfter(endTag, `\n\n${lastSpaces}`)
}
})
}
} else {
if (lineDifference > 1) {
let hasOnlyTextBetween = true
for (
let i = endTag.loc.start.line;
i < closestSibling.loc.start.line - 1 && hasOnlyTextBetween;
i++
) {
hasOnlyTextBetween = !/^\s*$/.test(
context.getSourceCode().lines[i]
)
insertNewLine(context, block, closestSibling, lineDifference)
} else if (configure.blankLine === 'consistent') {
let newlineCount = 0
let siblingLineDifference = 0
/** @type {VElement | null} */
let prevChild = null
const siblingElements = block.parent.children.filter(
(element) => element.type === 'VElement'
)
// get parent
for (const child of siblingElements) {
if (!prevChild) {
prevChild = /** @type {VElement} */ (child)
continue
}
if (!hasOnlyTextBetween) {
removeExcessLines(context, endTag, closestSibling)
siblingLineDifference =
child.loc.start.line - prevChild.loc.end.line

if (siblingLineDifference > 1) {
newlineCount++
}
prevChild = /** @type {VElement} */ (child)
}
const ratio = newlineCount / (siblingElements.length - 1)

if (0.5 - ratio < 0.005) {
insertNewLine(context, block, closestSibling, lineDifference)
} else {
removeExcessLines(context, endTag, closestSibling, lineDifference)
}
} else {
removeExcessLines(context, endTag, closestSibling, lineDifference)
}
break
}
Expand All @@ -166,7 +195,7 @@ module.exports = {
items: {
type: 'object',
properties: {
blankLine: { enum: ['always', 'never'] },
blankLine: { enum: ['always', 'never', 'consistent'] },
prev: { type: 'string' },
next: { type: 'string' }
},
Expand Down
115 changes: 115 additions & 0 deletions tests/lib/rules/padding-line-between-tags.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,43 @@ const tester = new RuleTester({

tester.run('padding-line-between-tags', rule, {
valid: [
{
filename: 'test.vue',
code: `
<template>
<header>
<div></div>

<div></div>

<div></div>
</header>
<div></div>
<div />
<footer></footer>
</template>
`,
options: [[{ blankLine: 'consistent', prev: '*', next: '*' }]]
},
{
filename: 'test.vue',
code: `
<template>
<header>
<div></div>
<div></div>
<div></div>
</header>

<div></div>

<div />

<footer></footer>
</template>
`,
options: [[{ blankLine: 'consistent', prev: '*', next: '*' }]]
},
{
filename: 'test.vue',
code: `
Expand Down Expand Up @@ -1027,6 +1064,84 @@ tester.run('padding-line-between-tags', rule, {
}
],
options: [[{ blankLine: 'never', prev: '*', next: '*' }]]
},
{
filename: 'test.vue',
code: `
<template>
<header>
<div></div>

<div></div>
<div></div>
</header>
<div></div>
<div />
<footer></footer>
</template>
`,
output: `
<template>
<header>
<div></div>

<div></div>

<div></div>
</header>
<div></div>
<div />
<footer></footer>
</template>
`,
errors: [
{
message: 'Expected blank line before this tag.',
line: 7,
column: 11
}
],
options: [[{ blankLine: 'consistent', prev: '*', next: '*' }]]
},
{
filename: 'test.vue',
code: `
<template>
<header>
<div></div>

<div></div>
<div></div>
<div></div>
<div></div>
</header>
<div></div>
<div />
<footer></footer>
</template>
`,
output: `
<template>
<header>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</header>
<div></div>
<div />
<footer></footer>
</template>
`,
errors: [
{
message: 'Unexpected blank line before this tag.',
line: 6,
column: 11
}
],
options: [[{ blankLine: 'consistent', prev: '*', next: '*' }]]
}
]
})