function-paren-newline error vs. max-len error

[blord-fullscreen]

The snippet:

export default connect(mapStateToProps, mapDispatchToProps)(
  generateDndContextWithBackend(SiteEditorContainer));

gives me the error Unexpected newline after "("

But when I remove the newline:

export default connect(mapStateToProps, mapDispatchToProps)(generateDndContextWithBackend(SiteEditorContainer));

I get the max-len error, because the line is longer than 100 characters.

What's the way to fix this to avoid all errors? function-paren-newline isn't currently smart enough to take account of line length, which seems like a shortcoming, especially now that we have highly evolved line-length tools like Prettier. I understand that there are tradeoffs, and best practices may conflict, but in principle there should be an error-free way to write this code that isn't highly contorted. Solution?

[yutin1987]

I have the same issue, happened at function-paren-newline

bad

    const wrapper = shallow(
      <Tabbar active={0}>
        <Tabbar.Tab>Teb 1</Tabbar.Tab>
        <Tabbar.Tab>Teb 2</Tabbar.Tab>
      </Tabbar>,
    );

bad

const wrapper = shallow(<Tabbar active={0}>
      <Tabbar.Tab>Teb 1</Tabbar.Tab>
      <Tabbar.Tab>Teb 2</Tabbar.Tab>
                            </Tabbar>)

const wrapper = shallow(<Tabbar active={0}>
      <Tabbar.Tab>Teb 1</Tabbar.Tab>
      <Tabbar.Tab>Teb 2</Tabbar.Tab>
    </Tabbar>);

react/jsx-indent vs react/jsx-closing-bracket-location on end line

[blord-fullscreen]

@yutin1987 That is actually a different problem. None of your lines above look too long. Perhaps something is odd with your config. Try pasting into the Prettier playground.

[ljharb]

Prettier has nothing to do with this; this guide does not endorse or recommend using Prettier.

@yutin1987 what about this:

export default connect(mapStateToProps, mapDispatchToProps)(
  generateDndContextWithBackend(SiteEditorContainer),
);

[blord-fullscreen]

@ljharb That doesn't work. In fact, it doubles the error:

Unexpected newline after "("
Unexpected newline before ")"

[yutin1987]

@ljharb @blord-fullscreen thank you for your answer.

because it is too long, the maximum line length of 100. (max-len)

const wrapper = shallow(<Tabbar active={0}><Tabbar.Tab>Teb 1</Tabbar.Tab><Tabbar.Tab>Teb 2</Tabbar.Tab></Tabbar>);

so, I need multiline. when I use enzyme shallow to testing.

    // exceeds the maximum line length of 100. (max-len)
    shallow(<Tabbar active={0}><Tabbar.Tab>Teb 1</Tabbar.Tab><Tabbar.Tab>Teb 2</Tabbar.Tab></Tabbar>);

    // Closing tag of a multiline JSX expression must be on its own line. (react/jsx-closing-tag-location)
    shallow(<Tabbar active={0}>
      <Tabbar.Tab>Teb 1</Tabbar.Tab><Tabbar.Tab>Teb 2</Tabbar.Tab></Tabbar>);

    // Expected indentation of 4 space characters but found 12. (react/jsx-indent)
    shallow(<Tabbar active={0}>
      <Tabbar.Tab>Teb 1</Tabbar.Tab><Tabbar.Tab>Teb 2</Tabbar.Tab>
            </Tabbar>);

    // Expected closing tag to match indentation of opening. (react/jsx-closing-tag-location)
    shallow(<Tabbar active={0}>
      <Tabbar.Tab>Teb 1</Tabbar.Tab><Tabbar.Tab>Teb 2</Tabbar.Tab>
    </Tabbar>);

    // Unexpected newline after '('. (function-paren-newline)
    // Unexpected newline before ')'. (function-paren-newline)
    shallow(
      <Tabbar active={0}>
        <Tabbar.Tab>Teb 1</Tabbar.Tab><Tabbar.Tab>Teb 2</Tabbar.Tab>
      </Tabbar>
    );

[ljharb]

This seems like it's actually a bug in the function-paren-newline rule (or an unavoidable conflict with max-len).

For now, you may want to disable that rule entirely; I'll leave this open to investigate disabling it in the config itself.

[the-noob]

Hopefully I'm not wrong but you are using "multiline" (default) so this should work ?

const isLocalhost = Boolean(
  window.location.hostname === 'localhost' ||
  // [::1] is the IPv6 localhost address.
  window.location.hostname === '[::1]' ||
  // 127.0.0.1/8 is considered localhost for IPv4.
  window.location.hostname.match(
    /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/,
  ),
);

Also posted in the ESLint issue

[ljharb]

@yutin1987 fwiw, this is how we handle your example:

shallow((
  <Tabbar active={0}>
    <Tabbar.Tab>Teb 1</Tabbar.Tab><Tabbar.Tab>Teb 2</Tabbar.Tab>
  </Tabbar>
));

or

shallow(
  <Tabbar active={0}>
    <Tabbar.Tab>Teb 1</Tabbar.Tab><Tabbar.Tab>Teb 2</Tabbar.Tab>
  </Tabbar>,
);

[brandonburkett]

The second option given still gives me the error. Including the training comma still complains about Unexpected newline after '('. (function-paren-newline)

<FormItem label="Full Name">
    {getFieldDecorator(fullName.id, fullName.options)(
        <Input type="text" size="large" placeholder="First & Last Name" />,
    )}
</FormItem>

[ljharb]

@devourment77

<FormItem label="Full Name">
    {getFieldDecorator(fullName.id, fullName.options)((
        <Input type="text" size="large" placeholder="First & Last Name" />
    ))}
</FormItem>

[trevtrich]

We run into this as well. For context, we use multiline. When we have situations like:

await Promise.all(response.list.map(blob => getResource({dataBlobId: blob.id, att: somethingElse})));

We hit our line length limit. Converting that to:

await Promise.all(
     response.list.map(blob => getBlobResource({dataBlobId: blob.id, att: somethingElse}))
);

is not allowed, though i think that is the cleanest way to handle this one. Other variations that do pass are:

await Promise.all(response.list.map(blob => getBlobResource({
    dataBlobId: blob.id,
    att: somethingElse
})));

await Promise.all(response.list.map(blob =>
    getBlobResource({dataBlobId: blob.id, att: somethingElse})));

both of which I feel are less clean than the first.

[trevtrich]

Also worth noting that we could additionally use the following (notice the additional parens) similar to what @ljharb mentioned for handling JSX code, which we also use right now because of this:

await Promise.all((
     response.list.map(blob => getBlobResource({dataBlobId: blob.id, att: somethingElse}))
));

Though this is close, it feels wrong to add in otherwise unnecessary code to pass the linting.

[ljharb]

I consider it as the multiline jsx is one unit, wrapped in parens - and that’s passed into a function.

[ljharb]

Closing; happy to reopen if there's something actionable here.