Visual Studio-Code ändert das Format (React-JSX)

Ich habe das folgende Snippet in meiner index.js

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

Der Code funktioniert, aber jedes Mal, wenn ich das Visual Studio-Format (Strg + S) speichere, sieht das jsx folgendermaßen aus:

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

Wie kann ich das lösen? Vielen Dank

Am Ende war der Trick, das Dateiformat von JavaScript in JavaScript React in der unteren Symbolleiste zu ändern. Ich veröffentliche es hier als zukünftige Referenz, da ich keine Dokumentation zu diesem Thema gefunden habe.

Zusätzlich zum oben genannten. Wenn Sie auf "Dateizuordnung für .js konfigurieren" klicken, können Sie alle .js-Dateien auf "Javascript React" setzen

Ändern Sie die Einstellungen für die vscode-Einstellungen> Benutzereinstellungen unten:

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

Sie können verhindern, dass VSC Ihre JSX falsch formatiert, indem Sie in Ihrer settings.json eine Zuordnung hinzufügen

Code> Preferences>Settings

Klicken Sie im Einstellungsfenster nach Assoziationen suchen , klicken Sie in settings.json auf Bearbeiten und fügen Sie Folgendes hinzu:

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

Alternativ mit dem Speichern der Datei .jsx Erweiterung löst dies in vscode.

Ich hatte die gleiche Herausforderung und hoffe, einen besseren Weg zu finden, um dieses Problem in vscode zu lösen.

Ich habe festgestellt, dass Ihre vorgeschlagene Problemumgehung jedes Mal durchgeführt werden muss, wenn Sie die Reaktionsdatei mit der Erweiterung .js öffnen

Stellen Sie sicher, dass in Ihrem aktuellen Arbeitsbereich nicht mehrere Javascript-Formatierer aktiviert sind. (Sie müssen den Rest für Ihren aktuellen Arbeitsbereich deaktivieren.)

React-Verschönerung macht meistens die Magie, schlägt aber fehl, wenn Sie bereits einen anderen JS-Formatierer / Verschönerer installiert haben.

In meinem Fall hatte ich React-Verschönerung und JS-CSS-HTML Formatter-Erweiterung installiert. Ich musste den JS-CSS-HTML-Formatierer für meinen aktuellen Arbeitsbereich deaktivieren.

Installieren Sie Prettier (falls nicht standardmäßig installiert) und versuchen Sie, dies Ihren Benutzer- oder Arbeitsplatzeinstellungen hinzuzufügen:

"prettier.jsxBracketSameLine": true

Setzen Sie keinen Zeilenumbruch zwischen return und dem zurückgegebenen JSX-Ausdruck.

Autoformat auslösen (Alt+Shift+F)und prüfen, ob es funktioniert.

Ich kämpfte damit, fand aber schließlich eine Lösung. Dies ist meine 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
}

Ich fügte hinzu

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

Sie können eine Erweiterung wie React-Verschönerung installieren, mit der Sie Ihren JSX-Code formatieren können.

Es ist hier zu finden

Diese Erweiterung umschließt Prettydiff / Esformatter, um Ihre Javascript-, JSX-, Typoskript- und TSX-Datei zu formatieren.

Ich hatte ein ähnliches Problem und fand dann heraus, dass es durch die Erweiterung "Verschönern" verursacht wurde. Nachdem ich die Erweiterung deinstalliert habe, funktioniert alles einwandfrei.

Ich musste die JS-CSS-HTML Formatter-Erweiterung in VSC deaktivieren. einzige Lösung für dieses Problem

Ich habe gerade alle oben genannten Kombinationen hinzugefügt.

1. fügte dies hinzu

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

2. fügte dies auch hinzu

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

3. Zusätzliche js-Formatierung gelöscht
4. schöner installiert
5. Schalten Sie hübscher und formatierender ein

Prettier ist ein Code-Formatierer mit einer Meinung. Es erzwingt einen konsistenten Stil, indem es Ihren Code analysiert und mit eigenen Regeln neu druckt, die die maximale Zeilenlänge berücksichtigen, und bei Bedarf Code umschließt. Dazu gehören: JavaScript TypeScript Flow JSX JSON CSS SCSS Weniger HTML Vue Angular GraphQL Markdown YAML https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode