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

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?

15 Answers

✔️Accepted Answer

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.

Other Answers:

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

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

@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>,
);

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.

More Issues: