question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Prettier should have a better opinion on createSelector() calls

See original GitHub issue

Prettier 1.14.3 Playground link

--parser babylon
--print-width 120
--tab-width 4

Input:

const getSearchResults = createSelector(
    getSearchResultIds,
    getAllRooms,
    (roomIds, allRooms) => roomIds.map(id => allRooms[id])
);

Output:

const getSearchResults = createSelector(getSearchResultIds, getAllRooms, (roomIds, allRooms) =>
    roomIds.map(id => allRooms[id])
);

Expected behavior:

const getSearchResults = createSelector(
    getSearchResultIds,
    getAllRooms,
    (roomIds, allRooms) => roomIds.map(id => allRooms[id])
);

I understand that currently prettier applies its rules regardless of context, but in case of reselect createSelector() calls this really reduces readability. The style that can be found in pretty much all examples of reselect and projects using it is very straightforward: One input selector per line, and then the callback to combine the input.

However, due to prettier’s preference of wrapping a callback argument if everything else fits in the same line (or even fitting everything in the same line), the resulting code is harder to read. It’s also inconsistent if you have multiple selectors in the same file and depending on the length of their arguments they sometimes get wrapped and sometimes they don’t.

One possible option for this could be to have some default overrides for certain function names, e.g. “one argument per line” for createSelector. I realize this might get close to “too much configuration” territory but it could always use a hardcoded list (or sane defaults) - also, easy-to-read/understand code should be a top priority IMHO, and that’s not the case with the current formatting here.

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:7 (7 by maintainers)

github_iconTop GitHub Comments

1reaction
ikatyangcommented, Nov 10, 2018

The fix is available in 1.15.2.

1reaction
lydellcommented, Nov 7, 2018

Imports aren’t tracked, and I don’t think we should do that.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Prettier and the Beauty of Opinionated Code Formatters
Since we started using Prettier on my team, pull request reviews are much more effective and we're no longer having stylistic discussions every....
Read more >
Redux Fundamentals, Part 8: Modern Redux with Redux Toolkit
The official Fundamentals tutorial for Redux: learn the modern way to write Redux logic.
Read more >
Building Efficient Reselect Selectors | Aug, 2020 - Medium
In this article, I'll go over some of these common issues and how you should design your selectors for maximum efficiency. The createSelector...
Read more >
Pros, Cons, Tips and Tricks when using Prettier in a large ...
Prettier, or code formatting in general can polarise developers - everyone has an opinion on braces. There are changes we can make and ......
Read more >
Is it safe to use hooks in createSelector? - Stack Overflow
Don't call Hooks inside loops, conditions, or nested functions. Instead, always use Hooks at the top level of your React function, before any ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found