mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
dan
727f30bd0b
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: https://github.com/bluesky-social/social-app/pull/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: https://github.com/facebook/react-native/pull/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
@react-native/eslint-config
Installation
yarn add --dev eslint prettier @react-native/eslint-config
Note: We're using yarn to install deps. Feel free to change commands to use npm 3+ and npx if you like
Usage
Add to your eslint config (.eslintrc, or eslintConfig field in package.json):
{
"extends": "@react-native"
}