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.

It doesn't change anything for react, only for vscode formatter — Vinz243, Nov 02 '18 at 09:36
Possible duplicate of [Prettier/VSCode Eslint weird format/syntax breaking bug](https://stackoverflow.com/questions/49215590/prettier-vscode-eslint-weird-format-syntax-breaking-bug) — Sagiv b.g, Nov 02 '18 at 09:43

taurus05 · Answer 1 · 2022-03-03T02:33:10.763

7

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.

edited Mar 03 '22 at 02:33

answered Mar 18 '20 at 03:01

taurus05

2,491
15
28

score 2 · Accepted Answer · answered Nov 02 '18 at 10:10

2

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

answered Nov 02 '18 at 10:10

Vinz243

9,654
10
42
86

score 0 · Answer 3 · answered Apr 26 '20 at 19:59

0

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

answered Apr 26 '20 at 19:59

appdesigns

114
1
11

score 0 · Answer 4 · answered Oct 21 '21 at 08:46

0

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

answered Oct 21 '21 at 08:46

Russel Osiemo

9
1
4

score -1 · Answer 5 · answered Oct 29 '19 at 11:18

-1

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.

answered Oct 29 '19 at 11:18

chamzz.dot

607
2
12
24

score -1 · Answer 6 · answered Mar 10 '21 at 16:45

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.

score -2 · Answer 7 · answered Nov 29 '20 at 11:10

-2

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

answered Nov 29 '20 at 11:10

Hashim Gujjar

1

score -3 · Answer 8 · edited Oct 30 '20 at 05:13

-3

type the following commands before creating a new app:

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

edited Oct 30 '20 at 05:13

Ali Kleit

3,069
2
23
39

answered Oct 29 '20 at 17:56

Amir Khan

1
3

Visual Studio code error while saving react files?

8 Answers8

Linked

Related