Reputation: 121

How to format React Codes in Visual Studio Code?

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?

Upvotes: 4

Answers (3)

Reputation: 121

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.

Upvotes: 6

Reputation: 1985

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

you can find both React & TypeScript React code formatter :

Upvotes: 0

Reputation: 1

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

Upvotes: 0