Visual Studio Code Change Format (React-JSX)

Question

I have 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) a visual studio format, jsx likes it:

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

}

How can i solve this? thank

Answer 1

In the end, what happened by changing the file format from JavaScript to JavaScript React in the bottom toolbar. I am posting it here for future reference, as I have not found any documentation on this topic.

In addition to the above. If you click Configure File Associations for .js, you can install all .js files in Javascript React.

Answer 2

vscode> :

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

Answer 3

, .jsx vscode.

, vscode.

, , .js

Answer 4

Prettier ( ) :

"prettier.jsxBracketSameLine": true

linebreak JSX.

(Alt+Shift+F) , .

Answer 5

, javascript . ( ).

- , , / JS.

JT-CSS-HTML Formatter. JS-CSS-HTML Formatter .

Answer 6

, response-beautify, jsx-.

prettydiff/esformatter javascript, JSX, typescript, TSX.

Answer 7

, , "". , .

Answer 8

, . 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
}

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

Answer 9

VSC JSX, settings.json.

Code > Preferences > Settings

, edit settings.json :

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