Hi there,
Is there a preferred formatter for React that you use? I have Prettier but it does not work as well-perhaps a settings issue? Thx
Follow these steps:
CTRL + SHIFT + P- Format Document (in pop-up bar)
- Select
Format Document - Select
Configure Default Formatter... - Select
Prettier - Code formatter
To enable Format On Save
CTRL + SHIFT + P- Preferences Open Settings (UI) (in pop-up bar)
- Type
Format On Save - Enable
Format On Saveif it is not checked
Done!
I have had the same issue, even thus I have installed the Prettier extension. It shows later that I have had another extension called JS-CSS-HTML Formatter. I uninstalled JS-CSS-HTML Formatter and kept Prettier, and all problem was solved.
This issue is mentioned here as well.
reactjs - Visual studio code changes format (React-JSX) - Stack Overflow
visual studio code - How can I override a react-beautify setting in VSCode? - Stack Overflow
VScode messes JSX format (beautify)
VScode messes JSX format (beautify) - javascript
Videos
In the end what did the trick was changing the file format from JavaScript to JavaScript React on the bottom toolbar. I'm publishing it here for future reference since I didn't find any documentation on this topic.
In addition to the above. If you click 'Configure File Association for .js' you can set all .js files to Javascript React
change vscode preferences settings > user settings below:
"files.associations": {
"*.js":"javascriptreact"
}
I have VS Code in Mac v1.8.1 and if you open a Folder with a .jsbeautifyrc you could override the properties, in your example if you create a folder with 2 files:
index.js
import {code} from 'source';
import {otherCode} from 'source';
.jsbeautifyrc
{
"bracepadding": true
}
you will get the next result after run the beautifier:
import { code } from 'source';
import { otherCode } from 'source';
Yes there is a bug,the .jsbeautifyrc file doesn't seem to be read in the react-beautify add-in.
The settings mentioned during the setup of the addon don't seem to work and also I have tried installing prettydiff in my system and also the esformatter-jsx and changed the configuration but it doesn't read the files
Workaround
You can try the beautify add-in with the following repo here.
and add the file .jsbeautifyrc to your file tree structure ,and the options mentioned in the settings page work in it.
The project has been updated to the latest js-beautify code version 1.6.8 with the support of the jsx support as mentioned in the screen shot
and also the working example
You don't need to use plugin for that: Change Language Mode command (Ctrl + KM) offers JavaScript React option, what is basically JS with JSX support.
Native Format Document command (usually bound to Alt + Shift + F) then does the trick.
Use a beautify tool that explicitly supports JSX such as react-beautify or prettier.
VSCodeBeautify may support JSX however seems to be cases where it does not work. See GitHub Issue 132.
You don't need to use plugin for that: Change Language Mode command (Ctrl + KM) offers JavaScript React option, what is basically JS with JSX support.
Native Format Document command (usually bound to Alt + Shift + F) then does the trick.
Use a beautify tool that explicitly supports JSX such as react-beautify or prettier.
VSCodeBeautify may support JSX however seems to be cases where it does not work. See GitHub Issue 132.
It happened to me as well. You need to set the language syntax from "plain" javascript to "javascript react".
Look at the images below, you will need to click at the bottom status bar and change the syntax.
To update all your files in the project go to "user settings" or "workspace settings" depends if you want it to be set for the project or for your user.
Now look up:
"files.associations": {},
and overide it and set something like this:
"files.associations": {
"*.js": "javascriptreact"
}
I encountered the same issue. Below is my finding: JS-CSS-HTML Formatter extension wraps prettier but it cannot support js files mixed with HTML. The solution is to disable this extension and enable prettier formatOnSave option for javascript in settings.json as below:
"[javascript]": {
"editor.formatOnSave": true
}
I used to have the same problem. Apparently beautify doesn't support JSX. I uninstalled and instead of it, I installed Prettier, it works great for me.
Hope I helped you.
Just change language mode javascript to javascript react [temporary]
VSCode Command: (Ctrl + KM)
Or Save file in .jsx format and change the settings.json file
"files.associations": {
"*.jsx": "javascriptreact"
}As you note, the Beautify extension is the root cause here (see this issue). That extension provides a document formatter that VSCode will run when you run the format command
A few options:
- Disable the extension
- Disable Beautify for just js files by removing the
jsentry from the"beautify.language"setting - Make sure your file has a language mode of
javascriptreact. I believe this will prevent Beautify from running on the file
Choose the language in right-bottom corner as "JavaScript React".
And a better way is to rename the js files to jsx.