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.

Answer 1

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 beatify and use prettify and it will work absolutely well.

Answer 2

将文件扩展名更改为 .jsx，以便格式化程序知道它包含标记

Answer 3

Another variant: change your settings to:

PS : Change language to JSX in Visual Studio Code

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

That way you can either keep your extension as .js

Answer 4

将语言模式更改为 javascript react [语言模式应为 javascript react 圆圈] https://i.stack.imgur.com/DDQUH.jpg

Answer 5

1. Click 'javascript' in the bottom - right

2. Then it will come a search bar.

3. In there you need to search react

4. Then select the first search result.

5. DONE

Answer 6

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.

Answer 7

type the following commands before creating a new app:

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

Answer 8

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.

Answer 9

1 禁用所有扩展 2 并选择语言模式为 JavaScriptReact [see pic is here] [1]: https://i.stack.imgur.com/uOwiT.png