Skip to content

Upgrade Prettier - #51065

Merged
molly-moen merged 4 commits into
stagingfrom
molly/upgrade-prettier
Apr 3, 2023
Merged

Upgrade Prettier#51065
molly-moen merged 4 commits into
stagingfrom
molly/upgrade-prettier

Conversation

@molly-moen

@molly-moen molly-moen commented Mar 31, 2023

Copy link
Copy Markdown
Contributor

Upgrade to the latest version of Prettier (2.8.7). This is necessary so that we can add typescript linting to our repo. The main changes applied here are:

  • add a space between function and (), so function() becomes function ()
  • some changes to the way multi-line statements were broken up. Details under “Improved method chain breaking heuristic” here
  • if we use a number as a key in an object, it removed quotes around the number. This is the only one I could see causing bugs.

I opted out of the following default changes in this upgrade (see .prettierrc.js)

  • A trailing comma at the end of every object. Ex {name: 'value', name2: 'value2',} (note comma after value2). Here’s their reasoning
  • Always wrap arrow function arguments with parentheses. I.e. go from const fn = x => … to const fn = (x) => …. I kept this as is for now (no parens) but I am open to thoughts on this one.

Links

Testing story

I am relying on drone to validate this change. I don't see any issues with the spacing changes. I spot tested the number changes and saw no issues, although I added one ignore here because it was applying the rule inconsistently.

If you want to view the changes, I would highly recommend viewing with whitespace hidden. I looked at all the non-test file changes with whitespace hidden and it took me quite a while. I spot checked some of the test file changes, but since they are all run by drone they felt less necessary to validate manually.

PR Checklist:

  • Tests provide adequate coverage
  • Privacy and Security impacts have been assessed
  • Code is well-commented
  • New features are translatable or updates will not break translations
  • Relevant documentation has been added or updated
  • User impact is well-understood and desirable
  • Pull Request is labeled appropriately
  • Follow-up work items (including potential tech debt) are tracked and linked

@molly-moen
molly-moen marked this pull request as ready for review April 3, 2023 17:57
@molly-moen
molly-moen requested a review from a team April 3, 2023 17:57

@levadadenys levadadenys left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Wow, well done! Like those rules improvements! LGTM!

(As for opted out changes):
+1 for trailing commas in the end of objects.

And just of curiosity, what's the pros of Always wrap arrow function arguments with parentheses. I.e. go from const fn = x => … to const fn = (x) => …. ? (IMO const fn = x => … is a little bit cleaner and more common)

@megcrenshaw

Copy link
Copy Markdown

My first job had the trailing comma rule, and it was an absolute pleasure. I would love to do this in our repo. But I do think if we enable it, doing it as a separate PR makes sense –– there are already so many files changed here.

I'm also pro keeping the parens for const f = (x) => for similar reasons –– slightly easier to update, and sounds like it will make working in TS easier. But again, it could be a separate PR.

I was visually surprised by the function () syntax (with the space) but understand their reasoning.

In short, I'm a fan of all the defaults! Thanks for your work on this.

As far as test coverage, I agree with your statement

if we use a number as a key in an object, it removed quotes around the number. This is the only one I could see causing bugs.

In that case, thoughts about disabling this rule for now and enabling it in a separate PR? It'd be easier to (a) revert if needed, and (b) get eyes on exactly what is changing.

@molly-moen

Copy link
Copy Markdown
Contributor Author

@megcrenshaw I agree we could discuss the other defaults and potentially do them as follow-ups. I feel ambivalent about the trailing commas, and lean towards the parens around single params.

For the quotes/numbers, I found all the cases where that was changed and either validated them locally or added an ignore if I could not validate. Do you think that's sufficient? Unfortunately the prettier configuration value we would apply in this case is preserve, which would mean I would either need to manually track down the quote changes (and hope I didn't miss any), or start over.

@megcrenshaw

Copy link
Copy Markdown

@megcrenshaw I agree we could discuss the other defaults and potentially do them as follow-ups. I feel ambivalent about the trailing commas, and lean towards the parens around single params.

For the quotes/numbers, I found all the cases where that was changed and either validated them locally or added an ignore if I could not validate. Do you think that's sufficient? Unfortunately the prettier configuration value we would apply in this case is preserve, which would mean I would either need to manually track down the quote changes (and hope I didn't miss any), or start over.

Ah, I see re: preserve. Makes sense! Thanks 👍

@sanchitmalhotra126 sanchitmalhotra126 left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM! I'm good with the defaults you've chosen.

@sanchitmalhotra126

Copy link
Copy Markdown
Contributor

My first job had the trailing comma rule, and it was an absolute pleasure. I would love to do this in our repo. But I do think if we enable it, doing it as a separate PR makes sense –– there are already so many files changed here.

I've haven't used the trailing comma rule (and initially thought I'd be opposed to it), but would be curious to try it out if it makes for cleaner diffs! FWIW, I personally use a prettier plugin in VSCode to lint as I go, so I don't think i'd notice either way.

@molly-moen

Copy link
Copy Markdown
Contributor Author

@levadadenys here is their reasoning for the parens around arrow params.

@molly-moen
molly-moen merged commit 563e253 into staging Apr 3, 2023
@molly-moen
molly-moen deleted the molly/upgrade-prettier branch April 3, 2023 21:59
@levadadenys

Copy link
Copy Markdown
Contributor

@levadadenys here is their reasoning for the parens around arrow params.

Oh, I see now, thanks for sharing. Agree, sounds reasonable to me. It can make dev process slightly more comfortable

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants