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

[Fix] jsx-props-no-multi-spaces: Show error in multi-line props #2756

Merged
merged 1 commit into from Aug 14, 2020
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.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
13 changes: 13 additions & 0 deletions docs/rules/jsx-props-no-multi-spaces.md
Expand Up @@ -16,6 +16,13 @@ The following patterns are considered warnings:
<App too spacy />
```

```jsx
<App
prop1='abc'

prop2='def' />
```

The following patterns are **not** considered warnings:

```jsx
Expand All @@ -26,6 +33,12 @@ The following patterns are **not** considered warnings:
<App very cozy />
```

```jsx
<App
prop1='abc'
prop2='def' />
```

## When Not To Use It

If you are not using JSX or don't care about the space between two props in the same line.
Expand Down
12 changes: 12 additions & 0 deletions lib/rules/jsx-props-no-multi-spaces.js
Expand Up @@ -38,10 +38,22 @@ module.exports = {
}

function checkSpacing(prev, node) {
const prevNodeEndLine = prev.loc.end.line;
const currNodeStartLine = node.loc.start.line;

if (currNodeStartLine - prevNodeEndLine > 1) {
context.report({
node,
message: `Expected no line gap between “${getPropName(prev)}” and “${getPropName(node)}”`
});
}

if (prev.loc.end.line !== node.loc.end.line) {
return;
}

const between = context.getSourceCode().text.slice(prev.range[1], node.range[0]);

if (between !== ' ') {
context.report({
node,
Expand Down
42 changes: 42 additions & 0 deletions tests/lib/rules/jsx-props-no-multi-spaces.js
Expand Up @@ -68,6 +68,23 @@ ruleTester.run('jsx-props-no-multi-spaces', rule, {
code: '<Foo.Bar baz="quux" />'
}, {
code: '<Foobar.Foo.Bar.Baz.Qux.Quux.Quuz.Corge.Grault.Garply.Waldo.Fred.Plugh xyzzy="thud" />'
}, {
code: `
<button
title="Some button"
type="button"
/>
`
}, {
code: `
<button
title="Some button"
onClick={(value) => {
console.log(value);
}}
type="button"
/>
`
}],

invalid: [{
Expand Down Expand Up @@ -128,5 +145,30 @@ ruleTester.run('jsx-props-no-multi-spaces', rule, {
errors: [
{message: 'Expected only one space between "Foobar.Foo.Bar.Baz.Qux.Quux.Quuz.Corge.Grault.Garply.Waldo.Fred.Plugh" and "xyzzy"'}
]
}, {
code: `
<button
title='Some button'

type="button"
/>
`,
errors: [{message: 'Expected no line gap between “title” and “type”'}]
}, {
code: `
<button
title="Some button"

onClick={(value) => {
console.log(value);
}}

type="button"
/>
`,
errors: [
{message: 'Expected no line gap between “title” and “onClick”'},
{message: 'Expected no line gap between “onClick” and “type”'}
]
}]
});