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.

Consider disabling the rule that removes 'unnecessary' brackets in basic operator expressions, or make it optional.

See original GitHub issue

Prettier 1.19.1 Playground link

--parser babel

Input:

const totalCost = fixed + (monthly * 12);

Output:

const totalCost = fixed + monthly * 12;

Expected behavior:

Maintain the parentheses for readability.

There are many expressions that rely on knowledge of explicit operator precedence. While technically they are unambiguous, we have recently proven in a code readability experiment that adding parenthesis improves readability.

The example above was included in our experiment that A/B tested code snippets on developers, and directly measured how easily they read the code. The data showed that by adding parentheses, there was a statistically significant improvement in speed of reading the code and accuracy in understanding it.

The findings are available here:

https://howreadable.netlify.com/results/#operator-precedence

The rule appears to be based on https://eslint.org/docs/rules/no-extra-parens. I have separately requested that rule to be amended based on the results.

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Reactions:4
  • Comments:13 (7 by maintainers)

github_iconTop GitHub Comments

3reactions
dvberzoncommented, Dec 19, 2019

@thorn0

I apologise for the references to ESlint. I can’t find any documentation in prettier for the list of rules that are applied, so I took my queue from #187 which mentions no-mixed-operators. If this is actually a prettier rule then I apologise, I wasn’t able to find it.

My understanding of prettier’s philosophy was to be opinionated about style decisions - decisions which do not affect the quality of the code - and to NOT make any changes based on code quality. I took this from the documentation: https://prettier.io/docs/en/comparison.html (a link which by the way has many references to ESlint!)

The point I’m trying to make is that by removing parentheses, prettier is unintentionally affecting the quality of the code. Our results show that expressions which rely on operator precedence are more readable with parentheses.

https://howreadable.netlify.com/results/#operator-precedence

I agree that in these cases, the parentheses don’t affect the syntactical structure of the code - much like whitespace. However, prettier would never consider removing line breaks and putting all the code on one line. it would massively reduce the code’s readability (whilst still being syntactically correct). I’m asking for similar consideration with parentheses.

0reactions
thorn0commented, Dec 19, 2019

Thanks for your unusual and valuable input. However, we are really reluctant to extend that list of exceptional cases where Prettier looks at the original formatting. It’s even planned to add an option to ignore the input formatting completely.

Readability is not the only constituent of Prettier’s value proposition. What about the goal of avoiding style debates within teams? Keeping the original formatting is a way away from this goal. With Prettier, such readability issues aren’t the developer’s responsibility anymore. The team simply agrees to delegate those formatting matters to Prettier and focuses on more interesting things. This comes with certain trade-offs, sure, but some say it’s worth it.

Of course, we welcome readability improvements, but not when they come at the cost of compromising other values of the project.

Read more comments on GitHub >

github_iconTop Results From Across the Web

IDE0047 and IDE0048: Parentheses preferences - .NET
Learn about code analysis rules IDE0047 and IDE0048: Parentheses preferences. ... Rule ID, IDE0047. Title, Remove unnecessary parentheses.
Read more >
Code Syntax Style: Optional Parentheses - JetBrains Rider
In the Parentheses category, specify whether to remove redundant parentheses and which operations should be considered as not having obvious precedence. The ...
Read more >
no-extra-parens - ESLint - Pluggable JavaScript Linter
This rule has a string option: "all" (default) disallows unnecessary parentheses around any expression; "functions" disallows unnecessary parentheses only ...
Read more >
Linter rules
This rule has a quick fix available. Details. DO avoid relative imports for files in lib/ . When mixing relative and absolute imports...
Read more >
Optional Braces - Scala 3 - EPFL
The rules are generally helpful in pinpointing the root cause of errors related to missing opening or closing braces. These errors are often...
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