Skip to content
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

feat: add test for tabs in no-extra-spacing-attrs #202

Merged
merged 9 commits into from
Aug 3, 2024
Merged
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
30 changes: 29 additions & 1 deletion docs/rules/no-extra-spacing-attrs.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# no-extra-spacing-attrs

This rule disallows extra spaces around attributes.
This rule disallows extra spaces around attributes, and/or between the tag start and end

## How to use

Expand All @@ -26,13 +26,17 @@ Examples of **incorrect** code for this rule:

<!-- an extra space between tag end and attribute -->
<div foo="foo" ></div>

<!-- an extra space between tag start and end -->
<div ></div>
```

Examples of **correct** code for this rule:

```html,correct
<div foo="foo" bar="bar"></div>
<div foo="foo"></div>
<div></div>
```

## Options
Expand Down Expand Up @@ -84,3 +88,27 @@ Example(s) of **correct** code for this rule with the `{ "disallowMissing": true
```

<!-- prettier-ignore-end -->

- `disallowTabs` (default: false): Enforce using spaces instead of tabs between attributes

Example(s) of **incorrect** code for this rule with the `{ "disallowTabs": true }` option:

<!-- prettier-ignore-start -->

```html
<div id="foo" class="bar">
</div>
```

<!-- prettier-ignore-end -->

Example(s) of **correct** code for this rule with the `{ "disallowTabs": true }` option:

<!-- prettier-ignore-start -->

```html
<div id="foo" class="bar">
</div>
```

<!-- prettier-ignore-end -->
208 changes: 121 additions & 87 deletions packages/eslint-plugin/lib/rules/no-extra-spacing-attrs.js
Original file line number Diff line number Diff line change
Expand Up @@ -20,9 +20,13 @@ const MESSAGE_IDS = {
EXTRA_BETWEEN: "unexpectedBetween",
EXTRA_AFTER: "unexpectedAfter",
EXTRA_BEFORE: "unexpectedBefore",
EXTRA_BEFORE_CLOSE: "unexpectedBeforeClose",
MISSING_BEFORE: "missingBefore",
MISSING_BEFORE_SELF_CLOSE: "missingBeforeSelfClose",
EXTRA_BEFORE_SELF_CLOSE: "unexpectedBeforeSelfClose",
EXTRA_TAB_BEFORE: "unexpectedTabBefore",
EXTRA_TAB_BEFORE_SELF_CLOSE: "unexpectedTabBeforeSelfClose",
EXTRA_TAB_BETWEEN: "unexpectedTabBetween",
};

/**
Expand All @@ -46,6 +50,9 @@ module.exports = {
disallowMissing: {
type: "boolean",
},
disallowTabs: {
type: "boolean",
},
enforceBeforeSelfClose: {
type: "boolean",
},
Expand All @@ -56,17 +63,27 @@ module.exports = {
[MESSAGE_IDS.EXTRA_BETWEEN]: "Unexpected space between attributes",
[MESSAGE_IDS.EXTRA_AFTER]: "Unexpected space after attribute",
[MESSAGE_IDS.EXTRA_BEFORE]: "Unexpected space before attribute",
[MESSAGE_IDS.EXTRA_BEFORE_CLOSE]: "Unexpected space before closing",
[MESSAGE_IDS.MISSING_BEFORE_SELF_CLOSE]:
"Missing space before self closing",
[MESSAGE_IDS.EXTRA_BEFORE_SELF_CLOSE]:
"Unexpected extra spaces before self closing",
[MESSAGE_IDS.MISSING_BEFORE]: "Missing space before attribute",
[MESSAGE_IDS.EXTRA_TAB_BEFORE]:
"Unexpected tab before attribute; use space instead",
[MESSAGE_IDS.EXTRA_TAB_BEFORE_SELF_CLOSE]:
"Unexpected tab before self closing; use space instead",
[MESSAGE_IDS.EXTRA_TAB_BETWEEN]:
"Unexpected tab between attributes; use space instead",
},
},
create(context) {
const enforceBeforeSelfClose = !!(context.options[0] || {})
.enforceBeforeSelfClose;
const disallowMissing = !!(context.options[0] || {}).disallowMissing;
const disallowTabs = !!(context.options[0] || {}).disallowTabs;

const sourceCode = context.getSourceCode().text;

/**
* @param {AttributeNode[]} attrs
Expand Down Expand Up @@ -98,48 +115,23 @@ module.exports = {
return fixer.insertTextAfter(current, " ");
},
});
} else if (disallowTabs) {
if (sourceCode[current.range[1]] === `\t`) {
context.report({
loc: getLocBetween(current, after),
messageId: MESSAGE_IDS.EXTRA_TAB_BETWEEN,
fix(fixer) {
return fixer.replaceTextRange(
[current.range[1], current.range[1] + 1],
` `
);
},
});
}
}
});
}

/**
Copy link
Contributor Author

@RobertAKARobin RobertAKARobin Jul 29, 2024

Choose a reason for hiding this comment

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

I moved this logic into the return { [Tag](node){} } function because otherwise I found that we were recalculating several variables that had already been calculated, and it also let me present the logic in a more linear way that I found easier to understand. This did result in one existing test being changed slightly... See https://github.com/yeonjuan/html-eslint/pull/202/files#diff-dc2d2c159cee6aaa292bf260ddb4613296b2d20c77543ba6c0705e29ed1a993eR312. I hope that's OK!

* @param {OpenTagEndNode | OpenScriptTagEndNode | OpenStyleTagEndNode} openEnd
* @param {AttributeNode} lastAttr
* @param {boolean} isSelfClosed
* @returns {void}
*/
function checkExtraSpaceAfter(openEnd, lastAttr, isSelfClosed) {
if (openEnd.loc.end.line !== lastAttr.loc.end.line) {
// skip the attribute on the different line with the start tag
return;
}
const limit = isSelfClosed && enforceBeforeSelfClose ? 1 : 0;
const spacesBetween = openEnd.loc.start.column - lastAttr.loc.end.column;

if (spacesBetween > limit) {
context.report({
loc: getLocBetween(lastAttr, openEnd),
messageId: MESSAGE_IDS.EXTRA_AFTER,
fix(fixer) {
return fixer.removeRange([
lastAttr.range[1],
lastAttr.range[1] + spacesBetween - limit,
]);
},
});
}

if (isSelfClosed && enforceBeforeSelfClose && spacesBetween < 1) {
context.report({
loc: getLocBetween(lastAttr, openEnd),
messageId: MESSAGE_IDS.MISSING_BEFORE_SELF_CLOSE,
fix(fixer) {
return fixer.insertTextAfter(lastAttr, " ");
},
});
}
}

/**
* @param {OpenScriptTagStartNode | OpenTagStartNode | OpenStyleTagStartNode} node
* @param {AttributeNode} firstAttr
Expand All @@ -164,42 +156,19 @@ module.exports = {
]);
},
});
}
}

/**
* @param {AnyNode} beforeSelfClosing
* @param {OpenTagEndNode | OpenScriptTagEndNode | OpenStyleTagEndNode} openEnd
* @returns
*/
function checkSpaceBeforeSelfClosing(beforeSelfClosing, openEnd) {
if (beforeSelfClosing.loc.start.line !== openEnd.loc.start.line) {
// skip the attribute on the different line with the start tag
return;
}
const spacesBetween =
openEnd.loc.start.column - beforeSelfClosing.loc.end.column;
const locBetween = getLocBetween(beforeSelfClosing, openEnd);

if (spacesBetween > 1) {
context.report({
loc: locBetween,
messageId: MESSAGE_IDS.EXTRA_BEFORE_SELF_CLOSE,
fix(fixer) {
return fixer.removeRange([
beforeSelfClosing.range[1] + 1,
openEnd.range[0],
]);
},
});
} else if (spacesBetween < 1) {
context.report({
loc: locBetween,
messageId: MESSAGE_IDS.MISSING_BEFORE_SELF_CLOSE,
fix(fixer) {
return fixer.insertTextAfter(beforeSelfClosing, " ");
},
});
} else if (disallowTabs) {
if (sourceCode[firstAttr.range[0] - 1] === `\t`) {
context.report({
loc: firstAttr.loc,
messageId: MESSAGE_IDS.EXTRA_TAB_BEFORE,
fix(fixer) {
return fixer.replaceTextRange(
[firstAttr.range[0] - 1, firstAttr.range[0]],
` `
);
},
});
}
}
}

Expand All @@ -216,24 +185,89 @@ module.exports = {
if (node.attributes.length) {
checkExtraSpaceBefore(node.openStart, node.attributes[0]);
}

if (node.openEnd) {
checkExtraSpacesBetweenAttrs(node.attributes);

const lastAttr = node.attributes[node.attributes.length - 1];
const nodeBeforeEnd =
node.attributes.length === 0 ? node.openStart : lastAttr;

if (nodeBeforeEnd.loc.end.line !== node.openEnd.loc.start.line) {
return;
}

const isSelfClosing = node.openEnd.value === "/>";

if (node.attributes && node.attributes.length > 0) {
checkExtraSpaceAfter(
node.openEnd,
node.attributes[node.attributes.length - 1],
isSelfClosing
);
const spacesBetween =
node.openEnd.loc.start.column - nodeBeforeEnd.loc.end.column;
const locBetween = getLocBetween(nodeBeforeEnd, node.openEnd);

if (isSelfClosing && enforceBeforeSelfClose) {
if (spacesBetween < 1) {
context.report({
loc: locBetween,
messageId: MESSAGE_IDS.MISSING_BEFORE_SELF_CLOSE,
fix(fixer) {
return fixer.insertTextAfter(nodeBeforeEnd, " ");
},
});
} else if (spacesBetween === 1) {
if (
disallowTabs &&
sourceCode[node.openEnd.range[0] - 1] === `\t`
) {
context.report({
loc: node.openEnd.loc,
messageId: MESSAGE_IDS.EXTRA_TAB_BEFORE_SELF_CLOSE,
fix(fixer) {
return fixer.replaceTextRange(
[node.openEnd.range[0] - 1, node.openEnd.range[0]],
` `
);
},
});
}
} else {
context.report({
loc: locBetween,
messageId: MESSAGE_IDS.EXTRA_BEFORE_SELF_CLOSE,
fix(fixer) {
return fixer.removeRange([
nodeBeforeEnd.range[1] + 1,
node.openEnd.range[0],
]);
},
});
}

return;
}

checkExtraSpacesBetweenAttrs(node.attributes);
if (
node.attributes.length === 0 &&
isSelfClosing &&
enforceBeforeSelfClose
) {
checkSpaceBeforeSelfClosing(node.openStart, node.openEnd);
if (spacesBetween > 0) {
if (node.attributes.length > 0) {
context.report({
loc: locBetween,
messageId: MESSAGE_IDS.EXTRA_AFTER,
fix(fixer) {
return fixer.removeRange([
lastAttr.range[1],
node.openEnd.range[0],
]);
},
});
} else {
context.report({
loc: locBetween,
messageId: MESSAGE_IDS.EXTRA_BEFORE_CLOSE,
fix(fixer) {
return fixer.removeRange([
node.openStart.range[1],
node.openEnd.range[0],
]);
},
});
}
}
}
},
Expand Down
Loading
Loading