There are a number of ways to set up prettier to work with eslint and it can be confusing.
To run prettier as an eslint rule, you would want to add a rule that allows eslint to run prettier. You do that with the eslint-plugin-prettier plugin.
"plugins": ["prettier"], // Defines a rule that allows eslint to run prettier.
"rules": {
"prettier/prettier": "error" // Turns on that rule.
}
You would also want to turn off eslint rules that may conflct with prettier. You do this with the eslint-config-prettier extension. Note this should come after any other extensions in order to override the rules as appropriate.
"extends": [
/*other extensions*/,
"prettier" // Turns off conflicting eslint rules.
]
As per their documentation, it sounds the recommended extension that comes with the prettier plugin actually takes care of everything for you, so you should be able to get away with just:
extends: [
// .. other extensions
'plugin:prettier/recommended',
]
https://github.com/prettier/eslint-plugin-prettier
Also, in case third-party plugins come with their own rules that may conflict with prettier, you used to have to add "prettier/that-plugin" - "prettier/react" in your case for instance - to the list of plugins in order to tell eslint to defer to prettier for these non-standard rules as relevant as well. But this no longer seems required.
reactjs - How to format React Project in VSCode with ESLint, Prettier, and Flow ending tag without {" "} - Stack Overflow
How do you use eslint and prettier to your react project
Prettier: Single Attribute Per Line
What eslint prettier config do u use?
Heres the tooling/linting/formatting guide I wrote for the company I work for...
https://signal-noise.github.io/rfcs/text/0002-tooling-linting-formatting
May be marginally out-of-date.
More on reddit.comVideos
There are a number of ways to set up prettier to work with eslint and it can be confusing.
To run prettier as an eslint rule, you would want to add a rule that allows eslint to run prettier. You do that with the eslint-plugin-prettier plugin.
"plugins": ["prettier"], // Defines a rule that allows eslint to run prettier.
"rules": {
"prettier/prettier": "error" // Turns on that rule.
}
You would also want to turn off eslint rules that may conflct with prettier. You do this with the eslint-config-prettier extension. Note this should come after any other extensions in order to override the rules as appropriate.
"extends": [
/*other extensions*/,
"prettier" // Turns off conflicting eslint rules.
]
As per their documentation, it sounds the recommended extension that comes with the prettier plugin actually takes care of everything for you, so you should be able to get away with just:
extends: [
// .. other extensions
'plugin:prettier/recommended',
]
https://github.com/prettier/eslint-plugin-prettier
Also, in case third-party plugins come with their own rules that may conflict with prettier, you used to have to add "prettier/that-plugin" - "prettier/react" in your case for instance - to the list of plugins in order to tell eslint to defer to prettier for these non-standard rules as relevant as well. But this no longer seems required.
I used this guide for setting up eslint with airbnb's style guide on a Yarn monorepo/workspace.
» npm install prettier
I think the issue is fixed,
"editor.formatOnSave": true,
and
"eslint.autoFixOnSave": true,
in my VS Code settings seemed to be conflicting. Changing my VS Code settings to the following:
"editor.formatOnSave": false,
"eslint.autoFixOnSave": true,
seems to fix the issue. Not sure why though.
It's because you are leaving trailing space at the end and eslint/priettier makes it more visible to let everyone know it is your real intention to place space there.
It might look unnecessary at first but there is real difference sometimes in HTML outcome.
Im fairy new to react discovered eslint and prettier the other day. I want to integrate it in my existing react project. How do I do it?
I watched/read some tutorials but I always get confused.
Thank you!