Admin
1
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.
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.
Click 'javascript' in the bottom - right
Then it will come a search bar.
In there you need to search react
Then select the first search result.
DONE
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
change language mode to javascript react [the language mode should be javascript react as circled] https://i.stack.imgur.com/DDQUH.jpg
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.
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.
1 Disable all extension 2 And select the language mode is JavaScriptReact [see pic is here ] [1]: https://i.stack.imgur.com/uOwiT.png
type the following commands before creating a new app:
npm install -g create-react-app
npx create-react-app myapp
cd myapp
npm start