why vscode is not recognizing react code as react javascript instead it format it as vanilla javascript
Solution 1
I am using create-react-app so it produce the main component App.js I am using .JSX in the other components but the problem is when I make any change to the App.js
I fixed this issue by changing the files associations setting in Vscode settings (specific to user workspace)
I just added this line
"files.associations": {
"*.js": "javascriptreact"
}
and worked perfectly for me.
Solution 2
rename your react files as 'jsx' files instead of js files and keep your vanilla javascript as js files. This way vs code and prettier know that you are using react-javascript instead of normal javascript.
Solution 3
I don't read anything about react in prettier documentation
As far as I understand, react code should be put in .jsx files, not .js
https://reactjs.org/docs/introducing-jsx.html
React doesn’t require using JSX, but most people find it helpful as a visual aid when working with UI inside the JavaScript code
Admin
Updated on June 06, 2022Comments
-
Admin over 1 year
I am using Prettier with format on save enabled but when I make any change in App.js and save it Prettier do destroy my code because it deals with it as plain javascript
-
Kaddath almost 5 yearsI don't see react in the list of supported languages for prettier, maybe simply this?
-
Predrag Beocanin almost 5 yearsReact isn't a language, so that could be it!
-
kemotoe almost 5 yearsIt's common for another installed formatter to take precedence over prettier. Beautify is a common culprit.
-
serraosays almost 5 yearsI gave you a general answer since your question is so vague. Update it with more project information and I could provide a better answer.
-
MarsAndBack almost 4 yearskemotoe's comment is important. It's easy to install many 3rd-party extensions with overlapping functionality. Before anything else, one should inspect their VS Code extensions.
-
-
Predrag Beocanin almost 5 yearsIt's a personal preference, but most editors will behave better when it's just a
.js
file because it is just a.js
file -
MarsAndBack almost 4 yearsSo what happens when you're working in non-React JS files, where you might prefer other formatting?
-
Machado about 3 yearsJS files doesn't have JSX HTML templates inside, so it's not just a JS file.
-
Muhammad Umer over 2 yearsyou get emmet auto completes in nodejs that's what happens
-
8bitIcon over 1 year@MarsAndBack You can create a directory
/yourproject/.vscode/settings.json
and paste above code there. Also make sure to add this directory in.gitignore