Visual studio code changes format (React-JSX)

Question

I've the following snippet in my index.js

class App extends Component {
    render() {
        return ( <div style = { styles.app } >
            Welcome to React!
            </div>
        )
    }
}

The code works, but every time I save (ctrl+s) visual studio format the jsx like that:

class App extends Component {
    render() {
        return ( < div style = { styles.app } >
            Welcome to React!
            <
            /div>
        )
    }
}

How can I solve this? thanks

Do you have a formatting extension installed? I copied your code into a new js file and it formats correctly with vs code. So if you have an extension installed I would say uninstall it, if not then maybe you need to update vscode — ndonohoe, Jul 09 '17 at 09:59

score 359 · Accepted Answer · edited May 03 '18 at 09:22

359

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

edited May 03 '18 at 09:22

Jay

65
1
8

answered Jul 10 '17 at 06:45

omer727

7,117
6
26
39

is there a way to enable this by default on all js files. Say, maybe a settings/ config file – Kenshinman Apr 11 '18 at 10:38
@Kenshinman Would like to know this as well! I am only working with React but my files are all .js and not .jsx – Eric Bachhuber Apr 21 '18 at 18:20
11

thanks, you can also consider to put "files.associations": { "*.js": javascriptreact" } to the settings.json – khoailang Jul 10 '18 at 09:09
@khoailang Looks like that works for me, it just appears we are missing the opening " for the value of javascriptreact. Hope that helps. – technoplato May 03 '19 at 04:10

score 72 · Answer 2 · answered Jul 02 '18 at 11:00

72

change vscode preferences settings > user settings below:

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

answered Jul 02 '18 at 11:00

dotdot

829
6
4

This should be the top answer! – Luhn Apr 27 '22 at 09:40

score 31 · Answer 3 · answered May 23 '19 at 16:44

31

You can prevent VSC from incorrectly formatting your JSX by adding an association in your settings.json

Code > Preferences > Settings

In the settings window search for associations, click edit in settings.json and then add:

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

answered May 23 '19 at 16:44

jadeallencook

686
1
8
13

1

By doing this, it will apply to all `.js`. files. Will it be any problem to all the other `.js`.files? – SAI SANTOSH CHIRAG Jan 30 '21 at 03:33

score 15 · Answer 4 · answered Jul 14 '17 at 22:21

15

Alternatively, saving the file with a .jsx extension resolves this in vscode.

I had the same challenge and I am hoping to discover a better way of handling this issue in vscode.

I noticed your suggested work-around has to be done each time you open the react file with an extension of .js

answered Jul 14 '17 at 22:21

twumm

375
1
13

3

is their any other way to give powers of JSX to JS ? – cop Jan 15 '18 at 10:42

CostaIvo · Answer 5 · 2021-07-02T15:45:34.930

8

Open the Visual Studio Code Settings. Refer the image below to see how to navigate to the settings.

Once the settings tab is open. If you want to make the settings changes for all the projects then select the User sub tab, if only for current project then select the Workspace sub tab.

type "file associations" in the search text box and press Enter.

Click on add item.

set Item : *.js
set Value : javascriptreact

Above changes will start associating all *js files in the project as javascript React files.

Next open any .js file in your project and right click and select Format Document. If you have multiple formatters then associate your favorite formatter. I have used Prettier to handle my formatting.

edited Jul 02 '21 at 15:45

answered Jun 11 '21 at 13:54

CostaIvo

1,029
13
19

how do you change the default formatter? Mine is set to C#, but there is no formatter for react listed even though it's selected at the bottom of the VSCode window – MC9000 Feb 13 '22 at 19:40
1

Install the extension for Prettier from https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode In VSCode settings you can set the value for the file to set your default formatted as shown below { "editor.defaultFormatter": "esbenp.prettier-vscode", "[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" } } – CostaIvo Feb 16 '22 at 06:51

score 5 · Answer 6 · edited Mar 26 '18 at 18:37

5

Install Prettier (if not installed by default) and try to add this to your user or workplace settings:

"prettier.jsxBracketSameLine": true

Do not put linebreak between return and the returned JSX expression.

Trigger autoformat (Alt+Shift+F) and check if works.

edited Mar 26 '18 at 18:37

emecas

1,586
3
27
43

answered Mar 26 '18 at 17:14

Janos

650
8
13

score 5 · Answer 7 · answered Mar 09 '19 at 04:57

I struggled with this but finally found a solution. This is my settings.json

{
    "terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe",
    "workbench.startupEditor": "welcomePage",
    "window.zoomLevel": 1,
    "emmet.includeLanguages": {
        "javascript": "javascriptreact",
        "vue-html": "html"
    },
    "editor.formatOnSave": true,
    "javascript.updateImportsOnFileMove.enabled": "always",
    "editor.wordWrap": "on",
    "editor.tabSize": 2,
    "editor.minimap.enabled": false,
    "workbench.iconTheme": "vscode-icons",
    "eslint.autoFixOnSave": true,
    "eslint.alwaysShowStatus": true,
    "beautify.ignore": [
        "**/*.js",
        "**/*.jsx"
    ],
    "prettier.jsxSingleQuote": true,
    "prettier.singleQuote": true
}

I added

"beautify.ignore": ["**/*.js","**/*.jsx"]

score 5 · Answer 8 · answered May 11 '22 at 01:16

Here is what worked for me-

I clicked on the Language mode (Javascript React) at the bottom of the screen

Then chose the Configure React Javascript Language based setting option

Then changed the javascript react default formatter to prettier as shown in the pic.

That pretty much did it for me after I saved the React file.

score 4 · Answer 9 · answered Oct 22 '17 at 05:28

4

Make sure you dont have multiple javascript formatters enabled in your current workspace. (You have to disable the rest of them for your current workspace).

react-beautify mostly does the magic but fails if you have some other JS formatter/beautifier already installed.

In my case, I had react-beautify and JS-CSS-HTML Formatter extension installed. I had to disable the JS-CSS-HTML Formatter for my current workspace.

answered Oct 22 '17 at 05:28

Ozesh

6,536
1
25
23

how do you disable a formatter for a single workspace? – Chris May 23 '18 at 05:31
Here is how you do it > (1) Go to the Extensions section. (2) Locate the JS-CSS-HTML Formatter (3) Head over to the Disable drowdown menu (4) There must be a section saying Disable (Workspace) – Ozesh May 23 '18 at 11:33

score 2 · Answer 10 · edited Jul 11 '20 at 15:44

2

I just added all the combinations mentioned above.

added this

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

added this also

"beautify.ignore": ["**/*.js","**/*.jsx"]

Deleted additional js formatting
installed prettier
turn ON prettier and formatting

edited Jul 11 '20 at 15:44

glinda93

7,659
5
40
78

answered Jul 11 '20 at 14:34

jamil_4128

29
1

score 1 · Answer 11 · answered Jul 09 '17 at 06:54

1

You can install an extension like react-beautify that helps you format your jsx code.

It is found here

This extension wraps prettydiff/esformatter to format your javascript, JSX, typescript, TSX file.

answered Jul 09 '17 at 06:54

Tal Avissar

10,088
6
45
70

1

Thanks, but I have already installed this extension it didn't help. – omer727 Jul 10 '17 at 06:39

score 1 · Answer 12 · answered Apr 08 '20 at 13:42

1

I had to disable the JS-CSS-HTML Formatter extension in VSC. only solution to this problem

answered Apr 08 '20 at 13:42

JamalGhafari

11
1

Definitely not the only solution to this problem – David Wright Apr 20 '20 at 07:06

score 1 · Answer 13 · answered Oct 14 '20 at 22:24

Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary. include : JavaScript TypeScript Flow JSX JSON CSS SCSS Less HTML Vue Angular GraphQL Markdown YAML https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

score 0 · Answer 14 · answered Aug 06 '18 at 13:34

0

I had similar problem, then I found out it was caused by 'beautify' extension. After I uninstalled the extension, everything is working fine.

answered Aug 06 '18 at 13:34

Akrom

311
2
5

score 0 · Answer 15 · answered Dec 12 '20 at 14:48

After reading many great suggestions and workarounds, I discovered that I could simply place my mouse arrow down over the bright blue horizontal bar at the bottom of VSCode editor window - right click - which opens a popup list window - and deselected = "Editor Indentation".

score 0 · Answer 16 · answered Sep 20 '21 at 18:23

0

You can double click JavaScript in the Status Bar at the bottom of VSCode, and then change the format from JavaScript to React (Choose React in the Select language mode to associate with '.jsx')

answered Sep 20 '21 at 18:23

Hervera

584
9
17

score 0 · Answer 17 · answered Jun 11 '23 at 08:14

Bottom bar in VS code

I found simple solution as the html tags we are using are jsx , so i changed javascript to javascript jsx for each .js file to save as jsx in bottom bar.

Disclaimer : May be this is an instant soltution for those who are just beginning with React , jsx.

score -3 · Answer 18 · edited Mar 04 '21 at 13:07

-3

add this in your .js code,

/* prettier-ignore */

edited Mar 04 '21 at 13:07

bguiz

27,371
47
154
243

answered Mar 04 '21 at 05:19

Nadeem

25
2

Visual studio code changes format (React-JSX)

18 Answers18

Linked

Related