Fix ESLint: Insert `·`(prettier/prettier) on WebStorm

Question

For the following react code I get the following error:

When I run ESLint using the --fix flag on my code base, I get an error that reads:

ESLint: A space is required before closing bracket(react/jsx-tag-spacing)

ESLint: Insert `.` (prettier/prettier)

Didn't find any documentation about this error - How do I fix that?

Note: I'm using WebStorm - not sure it is related.

Answer 1

This Question is a Couple Years Old, but It Deserves a Better Answer & Explanation

PRETTIER/PRETTIER

Prettier/Prettier isn't the error, its exactly what it says it is, it is Prettier. The rule comes from a plugin that you installed called eslint-plugin-prettier. What the Plugin, and the Prettier/Prettier rule do, is they execute prettier through ESLint, or through the Prettier/Prettier rule really. ESLint is capable of Linting, and formatting code, which cause issues with prettier, which also formats code, but does say in a way that is described as "Bias". Devs often opt to use both, so they can take advantage of what a linter and bias formatter both offer, which is a topic beyond the scope of this answer.

To harmonize ESLint, and prettier, the "eslint-plugin-prettier" extension uses the Prettier/Prettier rule to execute prettier through ESLint, so that any problems that occur after formatting with prettier, and linting/fixing with ESLint, show up as an error reported by Prettier/Prettier. The errors should be interpreted as a conflict between Prettier & ESLint, or between Prettier & a different ESLint-Plugin. Generally, the issue is that ESLint and Prettier are not configured harmoniously, and a change needs to be made to, either the .prettierrc configuration, or the .eslintrc.* configuration.

---

The Actual Error

The actual error, as stated above, is not Prettier/Prettier. The reason Prettier/ prettier showed up in the message is because it is the rule that is reporting the error, but the actual error is the part that reads:

"A space is required before a closing bracket."

The error message is in reference to a rule added by another plugin, which maybe causing a conflict with a prettier a rule, that at the time (4/2020) was active, but the rule was deprecated, in favor of this rule: --jsx-bracket-same-line

The actual error that occurred though, was prettier saying, my configuration doesn't like how the react/jsx plugin rule is fixing (or formatting) the code.

The React plugin rule that prettier is complaining about in the error message is JSX-tag-spacing.

And that, just FYI, is what that error you are getting is all about. You have a couple different plugins, linting a code base that's using a framework, on top of a language, with embedded HTML. Any situation like that is going to require that you fine tune your development environment, linter, debugger, and what ever other tools.

Answer 2

It's asking you to insert a single white space... You can enable Other/Spaces/In empty tag in Preferences | Editor | Code Style | HTML to get spaces added on code auto-formatting