Skip to content
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

Remove prettier from eslint-config-react-native-community #26903

Closed
mwss1996 opened this issue Oct 17, 2019 · 11 comments
Closed

Remove prettier from eslint-config-react-native-community #26903

mwss1996 opened this issue Oct 17, 2019 · 11 comments
Labels
DX Issues concerning how the developer experience can be improved. Stale There has been a lack of activity on this issue and it may be closed soon.

Comments

@mwss1996
Copy link

mwss1996 commented Oct 17, 2019

Hi.

I use prettier as a plugin in my code editor (Sublime Text), and use eslint-config-prettier to disable formatting rules from Eslint. But eslint keep popping up a lot of formatting rules. After some time searching i found that the origin of these rules was the prettier plugin in the eslint-config-react-native-community package.

I don't know why these rules are in this package, but i think they don't need to be there.

Steps to reproduce:

Follow the configuration tutorial in the readme page:
https://github.com/facebook/react-native/blob/master/packages/eslint-config-react-native-community/README.md

Run the bellow command to check the enabled rules:
yarn eslint --print-config *.tsx (replace *.tsx with your project file format)

Output:

  "plugins": [
    "jest",
    "react-native",
    "prettier",
    "eslint-comments",
    "react-hooks",
    "react",
    "@typescript-eslint"
  ]

These are the enabled plugins with the extension.

Now i disabled it and run the print-config again:

  "plugins": [
    "react-hooks",
    "react",
    "@typescript-eslint"
  ]

As you can see, these plugins are added by the @react-native-community extension:

  • "jest",
  • "react-native",
  • "prettier",
  • "eslint-comments",
@mwss1996 mwss1996 added the Bug label Oct 17, 2019
@react-native-bot react-native-bot added Ran Commands One of our bots successfully processed a command. Resolution: Needs More Information labels Oct 17, 2019
@ravirajn22
Copy link

Why does React-Native force developers to use prettier by default? Why add dependencies unnecessarily? IMO, we should remove prettier eslint configuration by default and let developers add it if required. It shouldn't be the other way where react-native adds it by default and users have to disable it if not required. Already react-native takes lot of effort to start a simple project and run for new developers, why then add more configurations. Let's keep it simple and clean.

@alexfoxy
Copy link

I agree with @ravirajn22. Why is prettier enabled by default? Seems to conflict with rules within the eslint config.

@pavermakov
Copy link

Absolutely hate the fact that the cli is shipping with preset eslint/prettier rules. I had both of them conflicting about whether to use double or single quotes.

@facebook facebook deleted a comment from react-native-bot Jan 30, 2020
@hramos hramos added DX Issues concerning how the developer experience can be improved. Needs: Triage 🔍 and removed Needs: Author Feedback Bug Ran Commands One of our bots successfully processed a command. labels Jan 30, 2020
@MoOx
Copy link
Contributor

MoOx commented Feb 1, 2020

I really love prettier & use it on every projects since the first day I tried that. But this "prettier" rules are really annoying, especially if prettier is setup in your IDE and/or as precommit hook. The goal of prettier is to help you "NOT CARE ABOUT STYLING".

The prettier and all styles rules enabled by @react-native-community/eslint-config are so annoying during development if your IDE shows you eslint errors/warnings as this defeat the entire purpose of prettier (again: not think about styling). It gives you false positives about "errors" as it show you something that a simple save (if you setup your editor to format on save) or a precommit hook will handle.

Please please remove all styles rules OR remove prettier & prettier rules, but be consistant. Encouraging prettier + adding unecessary/annoyings styles rules is a very awkward situation...

@MoOx
Copy link
Contributor

MoOx commented Feb 1, 2020

Until a decision is made for those wanting to get "most of this config except prettier stuff", you can

Install eslint-config-prettier

And use this config

module.exports = {
  root: true,
  extends: [
    '@react-native-community/eslint-config',
    'eslint-config-prettier',
  ],
  rules: {
    'prettier/prettier': 0,
  },
};

@Handfish
Copy link

As a follow-up to @MoOx - Prettier was still issuing linting errors with my editor.

I solved it with an additional step. I created a .prettierignore in the project root directory and added the following paths:

./*
*/*
/*.*

Cheers.

@stale
Copy link

stale bot commented Sep 11, 2020

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

@stale stale bot added the Stale There has been a lack of activity on this issue and it may be closed soon. label Sep 11, 2020
@stale
Copy link

stale bot commented Sep 20, 2020

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.

@stale stale bot closed this as completed Sep 20, 2020
@WarrenBuffering
Copy link

I'm still seeing these issues. The standard prettier config blended with react-native-community's eslint contradict eachother. If I format a document it breaks prettier's rules

@noxware
Copy link

noxware commented Nov 7, 2020

Prettier eslint rules should be removed. Prettier is to forget about formatting, not to paint your code with red underlines everywhere.

@pke
Copy link

pke commented Aug 31, 2021

As a follow-up to @MoOx - Prettier was still issuing linting errors with my editor.

I solved it with an additional step. I created a .prettierignore in the project root directory and added the following paths:

./*
*/*
/*.*

Cheers.

This would disable prettier all together, wouldn't it. The goal should be to get rid of the eslint plugin.

@facebook facebook locked as resolved and limited conversation to collaborators Oct 3, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
DX Issues concerning how the developer experience can be improved. Stale There has been a lack of activity on this issue and it may be closed soon.
Projects
None yet
Development

No branches or pull requests