Skip to content

Commit

Permalink
Replace outdated Prettier settings with recommended ones (#43756)
Browse files Browse the repository at this point in the history
Summary:
The React Native ESLint preset currently endorses the Prettier integration that is [explicitly recommended against by Pretier itself](https://prettier.io/docs/en/integrating-with-linters). Notice the difference between these two packages:

- `eslint-config-prettier` is the config that turns off all formatting rules. It's **recommended by Prettier** to be used together with Prettier. You'd still use Prettier itself to actually do the formatting.
- `eslint-plugin-prettier` is a legacy plugin developed a long time ago and that predates most modern Prettier integrations. It runs Prettier as if it were an ESLint rule, applies formatting on `--fix`, and **is not recommended**.

Unfortunately, RN uses the latter one (and always has).

This PR removes `eslint-plugin-prettier` and instead enables `eslint-config-prettier`, as recommended by Prettier.

As a consequence, you'll no longer see squiggly lines in your editor for stuff that isn't actually errors:

<img width="558" alt="Screenshot 2024-04-01 at 20 00 50" src="https://github.com/facebook/react-native/assets/810438/91ae2cec-a9ef-4205-a9ce-6ab858785ed2">

As another consequence, **you'll have to set up your own Prettier step in your pipeline**.

For example, if your precommit hook only contained `eslint --fix`, you'll now also need to run `prettier --write` there as well. Similarly, if you want Prettier to fail CI, you'd need to find where you call `eslint` and also do `prettier --check` there.

Here's an example for how to do it: bluesky-social/social-app#3373

## Changelog:

<!-- Help reviewers and the release process by writing your own changelog entry.

Pick one each for the category and type tags:

[ANDROID|GENERAL|IOS|INTERNAL] [BREAKING|ADDED|CHANGED|DEPRECATED|REMOVED|FIXED|SECURITY] - Message

For more details, see:
https://reactnative.dev/contributing/changelogs-in-pull-requests
-->

[GENERAL] [BREAKING] - RN ESLint config no longer runs Prettier during ESLint

Pull Request resolved: #43756

Test Plan:
Tested locally, verified formatting changes no longer get flagged as violations by the RN config.

<img width="470" alt="Screenshot 2024-04-01 at 20 33 55" src="https://github.com/facebook/react-native/assets/810438/515db971-18bc-4625-bb6d-b9d072692923">

Reviewed By: motiz88

Differential Revision: D55643699

Pulled By: yungsters

fbshipit-source-id: 97df774275922086f0356ac857d6425713184e39
  • Loading branch information
gaearon authored and facebook-github-bot committed Apr 4, 2024
1 parent 26cc8cd commit 727f30b
Show file tree
Hide file tree
Showing 2 changed files with 1 addition and 2 deletions.
2 changes: 1 addition & 1 deletion packages/eslint-config-react-native/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ module.exports = {
},
},

extends: ['plugin:prettier/recommended'],
extends: ['prettier'],

plugins: [
'eslint-comments',
Expand Down
1 change: 0 additions & 1 deletion packages/eslint-config-react-native/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,6 @@
"eslint-plugin-eslint-comments": "^3.2.0",
"eslint-plugin-ft-flow": "^2.0.1",
"eslint-plugin-jest": "^27.9.0",
"eslint-plugin-prettier": "^4.2.1",
"eslint-plugin-react": "^7.30.1",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-native": "^4.0.0"
Expand Down

0 comments on commit 727f30b

Please sign in to comment.