-
-
Notifications
You must be signed in to change notification settings - Fork 27.1k
Add Prettier config to app #8157
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: main
Are you sure you want to change the base?
Conversation
This pull request has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs. |
This is still an issue. |
There haven't been any conflicts. Is there anything I need to do to get this to a mergeable or reviewable state? |
This pull request has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs. |
This pull request is still working and awaiting review. |
This comment was marked as outdated.
This comment was marked as outdated.
arrowParens: 'avoid', | ||
singleQuote: true, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is what I would recommend to beginners of React and Prettier now, though I'd like opinions before committing it:
arrowParens: 'avoid', | |
singleQuote: true, | |
semi: false, | |
trailingComma: 'all', |
Rationale
Option | Notes |
---|---|
arrowParens |
Prettier now sets this on by default, as it makes it easier to add parameters and types, which is especially helpful for beginners |
singleQuote |
Prettier still uses double quotes for JSX, so it makes more sense to be consistent with the defaults |
semi |
Getting rid of semicolons makes it easier to read, write, and reorder lines of code, and Prettier already fixes the issues with ASI |
trailingComma |
Historically Prettier defaulted to ES5 , but we use use Babel, so we can use newer syntax without worrying about browser support |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I've published prettier-config-nick
if anyone would like to use it before this is merged.
Rationale
This monorepo has a Prettier config that affects formatting of all files, including the official templates. However, because this config isn't included in the templates, running Prettier (as recommended in the docs) will change the formatting of the app, which can be confusing or inconvenient.
Changes
Modified the init script to copy the monorepo's Prettier config to
package.json
(for any template). In the future we may want to make this extensible if third party templates need to set their own Prettier configs.Testing
Created an example app with
yarn create-react-app my-app
, confirming that the Prettier config was created in package.json and running Prettier does not reformat the files (as the formatting is already correct).