react-native icon indicating copy to clipboard operation
react-native copied to clipboard

Replace outdated Prettier settings with recommended ones

Open gaearon opened this issue 10 months ago • 2 comments

Summary:

The React Native ESLint preset currently endorses the Prettier integration that is explicitly recommended against by Pretier itself. 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:

Screenshot 2024-04-01 at 20 00 50

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: https://github.com/bluesky-social/social-app/pull/3373

Changelog:

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

Test Plan:

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

Screenshot 2024-04-01 at 20 33 55

gaearon avatar Apr 02 '24 03:04 gaearon

duplicate of https://github.com/facebook/react-native/pull/41877?

berdyshev avatar Apr 02 '24 13:04 berdyshev

@yungsters has imported this pull request. If you are a Meta employee, you can view this diff on Phabricator.

facebook-github-bot avatar Apr 02 '24 16:04 facebook-github-bot

@yungsters merged this pull request in facebook/react-native@727f30bd0b27ff168e6a6556a9ffbc7e42dbb8f0.

facebook-github-bot avatar Apr 04 '24 06:04 facebook-github-bot

This pull request was successfully merged by @gaearon in 727f30bd0b27ff168e6a6556a9ffbc7e42dbb8f0.

When will my fix make it into a release? | How to file a pick request?

github-actions[bot] avatar Apr 04 '24 06:04 github-actions[bot]