'Visual studio code changes format (React-JSX)

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

Solution 1:^[1]

change vscode preferences settings > user settings below:

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

Solution 2:^[2]

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"
}

Solution 3:^[3]

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

Solution 4:^[4]

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.

Solution 5:^[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.

Solution 6:^[6]

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"]

Solution 7:^[7]

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.

Solution 8:^[8]

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

Solution 9:^[9]

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.

Solution 10:^[10]

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

Solution 11:^[11]

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

Solution 12:^[12]

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".

Solution 13:^[13]

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')

Solution 14:^[14]

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

Solution 15:^[15]

Extensions I use

Not allowed to post a picture yet, but this is the extensions I use.
The first one is called Beautify - helps with HTML, CSS, JS
The second one is rc-beautify - helps with TS, JS, React.

Also Babel JavaScript is used as the language mode.

Solution 16:^[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.

Solution 17:^[17]

add this in your .js code,

/* prettier-ignore */

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	dotdot
Solution 2	jadeallencook
Solution 3	twumm
Solution 4
Solution 5	emecas
Solution 6	Loc Mai
Solution 7	Ozesh
Solution 8	glinda93
Solution 9	Tal Avissar
Solution 10	Akrom
Solution 11	JamalGhafari
Solution 12	Tim Conroy
Solution 13	Hervera
Solution 14	Laxifan
Solution 15	Dharman
Solution 16	Snowcat
Solution 17	bguiz

'Visual studio code changes format (React-JSX)

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]

Solution 7:[7]

Solution 8:[8]

Solution 9:[9]

Solution 10:[10]

Solution 11:[11]

Solution 12:[12]

Solution 13:[13]

Solution 14:[14]

Solution 15:[15]

Solution 16:[16]

Solution 17:[17]