News for hackers. Stuff that matters.
Re:Prettier $20k Bounty was Claimed by thenbe on Monday November 27, 2023 @12:26PM (#38435151)
While it's always great to see performance gains, my largest pain point with prettier was never performance. Instead my only gripe with prettier is the "line wrapping noise" it creates, illustrated here by Anthony Fu: https://antfu.me/posts/why-not-prettier#the-line-wrapping-no...

Would it be realistic to expect a solution for this issue now that "prettier needs to step up it's game"?

Re:Prettier $20k Bounty was Claimed by j1elo on Monday November 27, 2023 @12:47PM (#38435476)
I'd rather have a strict line length limit, than having my coworker creating objects in lines 150 or 180 chars long.

So we'd end up discussing what is the best choice. I bet I'd also end up discussing those things with Anthony Fu. If the limit is 80, then the limit is 80, not 81.

Come Prettier. No more discussions. I definitely buy the tiny amount of "noise" it brings, in exchange for freeing me from an immense amount of actual noise when having to discuss these things with other people.

EDIT: This comes from a backend dev (C/C++, sometimes Go, recently did some stuff with TypeScript). Prettier was a refreshing discovery, and other languages like Python are able to express the rule very sensibly (albeit I round it and go for 80 or 100):

https://peps.python.org/pep-0008/#maximum-line-length

Re:Prettier $20k Bounty was Claimed by nicoburns on Monday November 27, 2023 @01:49PM (#38436438)
> If the limit is 80, then the limit is 80, not 81.

I agree with that. But the limit should be 120 or 160, not 80 (and my formatter should allow me to set a wider limit like that without making all my lines extra-wide - I want to be able to put things on one line where appropriate and not where it's not).

> I definitely buy the tiny amount of "noise" it brings

Tiny? It makes a lot of my code 3-5x as long. And often breaks things in weird places. This is IMO not a small reduction in readability.

Re:Prettier $20k Bounty was Claimed by wentin on Monday November 27, 2023 @02:27PM (#38436969)
Do you work with a large team? There is no correct answer for formatting for a team, there is only correct answer for individual person. The line limit 80/120/160 will work for certain people with their setup, but not others. Stuff like using a ultrawide screen with two columns, or code on laptop screen with single column, or code with half screen code editor and half screen browser, etc, there are endless mutation, all of them can benefit from different settings. It is essentially not possible to find the best option for everyone on the team. You may think 120 is the best, but there is no way to prove it. It just worked for you because of your coding setup and preference.
Re:Prettier $20k Bounty was Claimed by kuchenbecker on Monday November 27, 2023 @05:18PM (#38439232)
I don't care what the limit is unless it's consistently applied.

My least favorite though no limit + soft wrapping, the philosophy being the code adapts to the user, but in actuality means the file looks completely different based on your monitor and setup removing visual aid to code navigation and familiarity.

Re:Prettier $20k Bounty was Claimed by dieselgate on Monday November 27, 2023 @05:28PM (#38439345)
I work on a ruby/ts/js codebase and seem to recall different file extensions having different line lengths. Something like that is annoying but at least it's more consistent within the file extension
Re:Prettier $20k Bounty was Claimed by j1elo on Monday November 27, 2023 @02:06PM (#38436697)
Like I mentioned to the sibling parent, 100 is an OK middle ground. 120, or more, is too long already, and 160 is waaaay beyond what I'd consider acceptable. No way you can fit 2 side-by-side editor panes with those line lengths, unless you use a tiny sized font.

I get it, 160 looks OK and fits into a 4K display without any other windows open. I believe working with dual panes is more productive, so I'll always stand behind shorter line lengths that allow for it.

Even Rust, a modern language that is usually said to collect the best learnings from the industry, thankfully chose a conservative and sensible 100 chars limit by default.

Re:Prettier $20k Bounty was Claimed by culi on Monday November 27, 2023 @04:54PM (#38438945)
I wasn't aware Rust chose a 100 line default. I'll definitely be using this to argue on my teams for why we should stretch the line length limit past 80. Thank you Rust for moving the industry forward
Re:Prettier $20k Bounty was Claimed by j1elo on Monday November 27, 2023 @05:17PM (#38439219)
I guess Rust made the same reasoning than Python. For this kind of things, the PEP documents tend to be well based on experience and be a good guideline which even applies for other languages. Check the PEP 8 that I linked in my comment: although they recommend a very conservative limit of 80 (79 actually) it says that if it makes sense, 100 (99) can be used too. And that's from 2001.
Re:Prettier $20k Bounty was Claimed by culi on Monday November 27, 2023 @04:52PM (#38438923)
> It makes a lot of my code 3-5x as long.

Do you mean entire files are made 3-5x as long or just individual lines every now and then?

Re:Prettier $20k Bounty was Claimed by mvdtnz on Monday November 27, 2023 @04:10PM (#38438323)
I understand not wanting to bike shed on the actual number but I refuse to accept 80. I simply do not agree that the greybeards with 70s technology got it figured out perfectly in their day and nothing has changed.
Re:Prettier $20k Bounty was Claimed by The_Colonel on Monday November 27, 2023 @03:08PM (#38437523)
> If the limit is 80, then the limit is 80, not 81.

I don't see a reason to enforce this strictly. The goal is readability, the max line length is an approximate proxy for that.

Re:Prettier $20k Bounty was Claimed by j1elo on Monday November 27, 2023 @03:34PM (#38437869)
I agree, actually :)

I ignored this point on purpose, to be more succint. But yes, it could be possible to have a soft limit (e.g. 80, or 100) and then you would have to set a hard limit (say, 85 or 105). But in the end you'd end up having someone who complains because their beautiful line was 84 chars and after adding the closing paren and the semicolon, it got wrapped into something that they don't like because subjective tastes.

So in the end, we just moved the goalpost +5 chars.

Re:Prettier $20k Bounty was Claimed by ipaddr on Monday November 27, 2023 @01:50PM (#38436452)
80 character limit? Are we trying to relive the late 80s. Soon we'll move back to 40 characters. Screens can support higher resolutions now limiting lines to 80 so developers can turn their brains off seems silly. Turn your brain on and learn to filter the noise of 100 characters.
Re:Prettier $20k Bounty was Claimed by wentin on Monday November 27, 2023 @02:32PM (#38437039)
People use ultrawide screen, with half screen dedicated to browser, half screen for code editor, and two columns open in editor. This is very modern setup, and 80 is perfect for it. Don't limit your thinking to your own setup.

I think discussion on the perfect limit on public forum is non-sense. It might be slightly less non-sense to discuss it with your team, but even that I think it is bike-shredding most of the time, unless the entire team for some reason (like they share the same equipment setup and happen to have same preference) overwhelmingly share the sentiment.

Re:Prettier $20k Bounty was Claimed by The_Colonel on Monday November 27, 2023 @03:11PM (#38437559)
> People use ultrawide screen, with half screen dedicated to browser, half screen for code editor, and two columns open in editor. This is very modern setup, and 80 is perfect for it. Don't limit your thinking to your own setup.

It kind of sounds like you're promoting your own setup.

The funny thing I see the most is that people with these crazy widescreen monitors still maximize just one window, with just one file open. Not sure why, maybe for focus?

Re:Prettier $20k Bounty was Claimed by wentin on Monday November 27, 2023 @11:05PM (#38442205)
Not promoting my setup, but just to point out that 80 is a sensible default, and it is not based / targeted for ancient old rare setups.
Re:Prettier $20k Bounty was Claimed by j1elo on Monday November 27, 2023 @01:59PM (#38436616)
100 is OK. But better to wager for 80, so people complain about their preferred 120+, and ending up with an acceptable 100 as a middle ground.

On my screen with 1920x1080, 2 side-by-side panels can fit 100 chars, but only if the sidebar is hidden (project layout, list of open files, that kind of stuff).

On my laptop, 2 side-by-side files won't fit if they exceed 90 chars.

I just don't want to concede to those devs who use a single editor pane with an ultrawide monitor, and believe that everybody must work like they do.

Re:Prettier $20k Bounty was Claimed by hoherd on Monday November 27, 2023 @02:07PM (#38436714)
These are web developers. Of course they're going to try to force content into a narrow width view and not let you choose to have a wider view even if it makes perfectly valid sense for the given content. These are usability problems that people aren't allowed to make their own decisions about because the UI designer knows the only right answer. "It makes the content more readable" and all that. /s
Re:Prettier $20k Bounty was Claimed by Cthulhu_ on Monday November 27, 2023 @03:57PM (#38438160)
It's not a dichotomy though; performance is imo essential for a tool that will run on every save, every commit, every pull request. It might be fast enough, but adding all runs up adds up to a lot of unnecessary energy waste.

With regards to the whitespace issue, that's down to the line length rules used I think. It's also down to the diff viewer how to show it, not the formatter.

Re:Prettier $20k Bounty was Claimed by varrock on Monday November 27, 2023 @12:51PM (#38435548)
Specifically for reviewing a pull request in GitHub, wouldn't the "Hide whitespace" setting reduce some of this noise? I could be mistaken, though, but that's how I interpreted that setting.

0: https://github.blog/2011-10-21-github-secrets/

Re:Prettier $20k Bounty was Claimed by sltkr on Monday November 27, 2023 @01:04PM (#38435733)
This is often useful, but JavaScript specifically has the annoying property that newlines can be semantically meaningful.

For example, if someone changes:

    function isUserBanned(username) {
      return db.findUserByName(username)?.banned;
    }
To:

    function isUserBanned(username) {
      return
          db.findUserByName(username)?.banned;
    }
you want to see that diff because the second version always returns undefined. If you ignore whitespace changes entirely, it becomes possible for people to sneak in bugs intentionally or unintentionally.
Re:Prettier $20k Bounty was Claimed by blauditore on Monday November 27, 2023 @03:21PM (#38437691)
That's technically true, but extrememly rare to cause real problems (short of bad intent). It reminds me of people/teams enforcing braces on single-line ifs, because one might add another line someday, forget to add braces, and break the logic. Even when it happens, there should still be tests that catch this.
Re:Prettier $20k Bounty was Claimed by Shish2k on Monday November 27, 2023 @04:49PM (#38438887)
On the one hand, yes, there should be tests. On the other, `goto fail;` :P

Also, adding braces from the start means that adding one new line of code is a one-line patch, instead of a four-line one - I do that for the same reason that I always put trailing commas on my array definitions

Re:Prettier $20k Bounty was Claimed by blauditore on Tuesday November 28, 2023 @09:46AM (#38446279)
> one new line of code is a one-line patch

On the flipside, having three trivial early-return ifs at the beginning of a function will become 9 lines long with braces instead of 6 (or just 3, when doing single-line ifs). Very often, such cases never expand to multiple lines in the future.

Re:Prettier $20k Bounty was Claimed by HALtheWise on Monday November 27, 2023 @02:20PM (#38436888)
How much does prettier formatting help here for practical cases? In particular, if the autoformatter allowed that second example with the indentation on the last line, I'd treat that as an autoformatter bug.
Re:Prettier $20k Bounty was Claimed by tharkun__ on Monday November 27, 2023 @01:22PM (#38436018)
Enforce semicolons.
Re:Prettier $20k Bounty was Claimed by chris_wot on Monday November 27, 2023 @01:29PM (#38436122)
gawd and this is why the semicolon debate wasn't just bike shedding.
Re:Prettier $20k Bounty was Claimed by adam_arthur on Monday November 27, 2023 @01:59PM (#38436607)
Yes, Prettier largely won by not having many competitors strictly focused on formatting in a simple to consume package.

I don't think many people who are serious about high "signal to noise" code formatting are supportive of the design decisions prettier makes. e.g. the staggered import lines, left-shifting and up-shifting of implementation details, not allowing trailing comments on the same line

We can have consistent formatting and also avoid tons of visual noise that prettier produces... I've wanted to build a competing solution for awhile, but never made the time for it. Perhaps Anthony's project achieves that... I'll give it a try!

Re:Prettier $20k Bounty was Claimed by ljm on Monday November 27, 2023 @12:40PM (#38435367)
Prettier’s biggest win is that it automates 99% of style complaints away and practically eliminates most classes of nitpicking.

But, as well as the issue with line noise, it also encourages patterns that I think detract from code comprehension. It favours expressions over statements and even now, it’s not easy to set a breakpoint in the middle of one, so you end up rewriting into statements just so you can step through.

It will favour deeply nested ternary statements in react so your code reads more like a tree with densely tangled roots.

It will favour shorthand syntax for optionally merging properties into an object, which basically relies on a quirk of the splat operator.

There is fuck all standard library to speak of without pulling in an insane amount of dependencies, but surely stuff like deep merge and compact should be provided out of the box?

Re:Prettier $20k Bounty was Claimed by tubthumper8 on Monday November 27, 2023 @01:12PM (#38435863)
> It favours expressions over statements and even now, it’s not easy to set a breakpoint in the middle of one, so you end up rewriting into statements just so you can step through.

I've never had an issue setting an inline breakpoint[1] in VS Code, is it an issue in other IDEs?

[1] https://code.visualstudio.com/Docs/editor/debugging#_inline-...

Re:Prettier $20k Bounty was Claimed by ljm on Monday November 27, 2023 @01:17PM (#38435937)
I use emacs, but chrome/firefox are a bit finicky about where you can set a breakpoint.

(Most people I know just use console.log - print debugging works all the time but I like having a repl)

Re:Prettier $20k Bounty was Claimed by yawboakye on Monday November 27, 2023 @01:38PM (#38436267)
does it? prettier is extremely configurable, unlike gofmt. so deferring to the authority of prettier is essentially deferring to the authority of the prettier.yml config. not that i have a problem with that _per se_, i’d expect the author(s) to take responsibility and appreciate that they’re defining/imposing their own taste(s).
Re:Prettier $20k Bounty was Claimed by hu3 on Monday November 27, 2023 @02:05PM (#38436684)
> prettier is extremely configurable

That's the opposite of what they claim: https://prettier.io/docs/en/option-philosophy

Re:Prettier $20k Bounty was Claimed by yawboakye on Tuesday November 28, 2023 @12:48PM (#38448552)
the delta, when prettier is introduced in a project for the first time, not counting +/- whitespace and semicolons (where none existed) isn’t huge. where it matters, the configuration options you get is all that’s necessary.
Re:Prettier $20k Bounty was Claimed by nicoburns on Monday November 27, 2023 @01:51PM (#38436470)
Extremely configurable? It has like 3 config options, and an explicit policy of not being configurable.
Re:Prettier $20k Bounty was Claimed by c-hendricks on Monday November 27, 2023 @12:49PM (#38435515)
Some things overlooked in that blog post for others to take into consideration:

- eslint only works on javascript + typescript (eslint + typescript needs _more_ configuration than eslint + prettier), while prettier works on https://github.com/prettier/prettier/blob/03ebc7869dc9e8f2fc...

- eslint + prettier doesn't need lots of configuration from the user. You add eslint-plugin-prettier and say `"extends": ["plugin:prettier/recommended"]`

Re:Prettier $20k Bounty was Claimed by thenbe on Monday November 27, 2023 @04:24PM (#38438536)
By default, eslint only lints files with a .js extension[1]. Eslint plugins are what allow eslint to support more languages. A list can be found here[2].

For the record, prettier can also be extended to support more languages[3].

[1] https://eslint.org/docs/latest/use/command-line-interface#--...

[2] https://github.com/dustinspecker/awesome-eslint#plugins

[3] https://prettier.io/docs/en/plugins#official-plugins

Re:Prettier $20k Bounty was Claimed by jakub_g on Monday November 27, 2023 @12:31PM (#38435227)
This is indeed the biggest annoyance of mine. I quite often end up rewriting code or changing variable names to counterbalance prettier making code ugly/unreadable.
Re:Prettier $20k Bounty was Claimed by tills13 on Monday November 27, 2023 @12:36PM (#38435308)
eh -- this is a one-time occurrence with prettier. Subsequent changes are guaranteed to be changes-only since formatting is consistent between authors.
Re:Prettier $20k Bounty was Claimed by c-hendricks on Monday November 27, 2023 @12:41PM (#38435390)
It happens often in JSX, you add one prop, which makes the line longer than the line width, which turns it into a multi line change.

It's annoying, but not a reason to throw the baby out with the bathwater.

Re:Prettier $20k Bounty was Claimed by WirelessGigabit on Monday November 27, 2023 @01:45PM (#38436376)
This isn't just a JSX problem. This is in any language that once you go over the column limit that it'll try to break it somewhere.
Re:Prettier $20k Bounty was Claimed by SamBam on Monday November 27, 2023 @12:42PM (#38435403)
It's not really an issue if you do a one-time Prettification commit, and then stick to Prettifying automatically thereafter. Then you won't ever see line-width changes mixed in with functional changes.

Isn't this an issue with every linter? At some point you're going to have to decide what to do with old code that doesn't match the new style rules.

Re:Prettier $20k Bounty was Claimed by lainga on Monday November 27, 2023 @12:52PM (#38435553)
Sure you will. Whoops, my regex got too long and now the diff is

    - filter: /\.(jimmy|jimbo|jeremiad)$/
    + filter:
    +     /\.(jimmy|jimbo|jeremiad|james)$/

. And it's not clear where the change is. GP's article has an example of that in a linked tweet.
Re:Prettier $20k Bounty was Claimed by Cthulhu_ on Monday November 27, 2023 @03:59PM (#38438196)
Is that down to the formatter - which you've configured to enforce a certain line length (https://prettier.io/docs/en/options.html#print-width) - or the diff visualiser that doesn't show a difference between whitespace and other changes?
Re:Prettier $20k Bounty was Claimed by francislavoie on Monday November 27, 2023 @06:59PM (#38440380)
It's impossible to turn off line length rules. You can only change the width, which means if you set it to a big number it will aggressively unwrap code you want to keep wrapped sensibly. Awful and unacceptable.
Re:Prettier $20k Bounty was Claimed by JasonSage on Monday November 27, 2023 @01:14PM (#38435890)
This is fine for a text diff, but I want my code review tool to show me something different. Separate problem, and the flaw here isn’t the diff, or the tool that produced the diff, rather the tool displaying it to me. Let me do whatever I want to my code and show me BOTH the visual (unimportant) and semantic differences.
Re:Prettier $20k Bounty was Claimed by nicky0 on Tuesday November 28, 2023 @04:02AM (#38443824)
Good point. Are there any code-semantics-aware diff tool out there though?
Re:Prettier $20k Bounty was Claimed by slackner on Tuesday November 28, 2023 @09:46AM (#38446281)
If you're looking for a VS Code extension or a GitHub app, check out https://semanticdiff.com/. I'm a co-founder of this project.

If you prefer a CLI tool, check out https://github.com/Wilfred/difftastic. It supports more languages, but doesn't recognize when code has been replaced by an equivalent version ("invariances"). So it will show some changes (e.g. replacing a character in a string with an escape sequence) even though they are technically equivalent.

Re:Prettier $20k Bounty was Claimed by richardwhiuk on Monday November 27, 2023 @12:50PM (#38435529)
> Then you won't ever see line-width changes mixed in with functional changes.

You will - every time you extend a line which now exceeds the limit.

Re:Prettier $20k Bounty was Claimed by twicetwice on Monday November 27, 2023 @12:55PM (#38435601)
Isn't this a natural consequence of having line length limits? This seems like a general problem, not a problem with Prettier.
Re:Prettier $20k Bounty was Claimed by richardwhiuk on Monday November 27, 2023 @01:01PM (#38435692)
Sure
Re:Prettier $20k Bounty was Claimed by francislavoie on Monday November 27, 2023 @07:00PM (#38440393)
It's an issue with prettier because it cannot be disabled.
Re:Prettier $20k Bounty was Claimed by IshKebab on Monday November 27, 2023 @01:16PM (#38435923)
That's not an issue with Prettier; it's an issue with having a consistent style and not using syntax aware diff tools.
Re:Prettier $20k Bounty was Claimed by dsherret on Monday November 27, 2023 @06:17PM (#38439936)
You can already mostly do this with dprint's TypeScript plugin if you tweak the config (and I'm open to adding more config to support this scenario in case something is missing). For example, the TypeScript team uses a line limit of 1000: https://github.com/microsoft/TypeScript/blob/1797837351782e7...