Why does prettier automatically insert empty interpolation code characters?

Question

Why does prettier create automatically insert empty interpolation {' '} code characters?

Here's my .prettierrc.json:

{
  "trailingComma": "none",
  "tabWidth": 2,
  "semi": true,
  "singleQuote": true,
  "jsxSingleQuote": true
}

Answer 1

On line 47, Notice the space after <Col> and before <strong>, this is where you likely you have some copypasta or strange-character. (Also this is why code in picture form is not preferred for questions, but instead code blocks are)

Prettier is likely escaping this character, for some odd reason, perhaps so it can be "output" in your resulting html.

Answer 2

It is because in your before you have a space between two components.

<Col> <strong>...

It interprets this as a literal string space that you want at the start of your “Col”. So it makes this very explicit by converting a space in your JSX to {‘ ‘}. That way it can put each element on its own line and still have the space at the beginning.