Visual studio code changes format (React-JSX)

Question

I\'ve the following snippet in my index.js

class App extends Component {
    render() {
        return ( 

            Welc         


        
                      

              相关标签:
       
      

Answer 1

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

Answer 2

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

Answer 3

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.

Answer 4

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

Answer 5

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

Answer 6

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