How to format React Codes in Visual Studio Code?

Question

When auto-formatting React codes in VSCode it makes errors. I am using the Prettier extension. So what is the best code formatted for this?

Answer 1

Prettier is extracly of you need. If you want to personalized format code jsx, you can configuration prettier with your style.

Answer 2

Use vscode internal react formatter, it's very good:

you can find both React & TypeScript React code formatter:

Answer 3

Finally, I have found a way to do it. In the vscode settings, I have to change to default format to prettier.

As well as on the project it is needed to create a.prettierrc file with suitable configurations for the project.

{
  "trailingComma": "es5",
  "tabWidth": 2,
  "semi": true,
  "singleQuote": true
}

And if you do not need it, you can always enable to format the code without the.prettierrc file.