Visual Studio code error while saving react files?

Question

And when i am saving this file with Ctrl+s even using prettier and other javascript extension snippets in visual code i am getting this deformed code which is showing errors

And Showing error as:

JSX element div has no corresponding closing tag.
JSX element Navbar has no corresponding closing tag.
JSX element NavbarBrand has no corresponding closing tag.
Identifier expected.
> expected.

Heterologous

Your file is a .js file when it should be a jsx – Outofdate

But i am making react app which has extension .js – Heterologous

It doesn't change anything for react, only for vscode formatter – Outofdate

It worked !! Thank You so much :) – Heterologous

Possible duplicate of Prettier/VSCode Eslint weird format/syntax breaking bug – Delve

Answer 1

Change your file extension to .jsx so the formatter knows that it contains markup

Outofdate

Answer 2

The problem is you've installed Beautify as well as Prettify both in your Vscode. Beautify is causing this problem. I tried removing beautify and it worked like a charm. Just remove beautify and use prettify and it will work absolutely well.

Clean

Answer 3

Another variant: change your settings to:

P.S: Change language to JSX in Visual Studio Code

{ "files.associations": { "*.js": "javascriptreact" } }

That way you can either keep your extension as .js

Chucho

Answer 4

change language mode to javascript react [the language mode should be javascript react as circled] https://i.sstatic.net/DDQUH.jpg

Poliomyelitis

Answer 5

You may have installed a formatter that not suit for html+js code snippets. uninstall (not work whether disable) it and set the default formatter in vs code.

Unbowed

Answer 6

The way I learned to do it is: The problem is probably that you are using a .js file but intend for it to run React. Now naturally, Vs code would identify this by itself if you saved it as a .jsx, but you don't want that. Simply click on the bottom right on VS Code Editor where it says Javascript.

You will see an option to Select the language Mode, here you can search for JavaScriptReact and select. That's it. This should solve your problem.

Aha

Answer 7

1 Disable all extension 2 And select the language mode is JavaScriptReact [see pic is here ] [1]: https://i.sstatic.net/uOwiT.png

Shilling

Answer 8

type the following commands before creating a new app:

npm install -g create-react-app
npx create-react-app myapp
cd myapp
npm start

Cudlip