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

78

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

omer727
quelle
Haben Sie eine Formatierungserweiterung installiert? Ich habe Ihren Code in eine neue js-Datei kopiert und sie formatiert korrekt mit vs-Code. Wenn Sie also eine Erweiterung installiert haben, würde ich sagen, sie zu deinstallieren. Wenn nicht, müssen Sie möglicherweise vscode
ndonohoe

Antworten:

244

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.

Geben Sie hier die Bildbeschreibung ein

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

omer727
quelle
Gibt es eine Möglichkeit, dies standardmäßig für alle JS-Dateien zu aktivieren? Sagen
wir
@Kenshinman Würde das auch gerne wissen! Ich arbeite nur mit React, aber meine Dateien sind alle .js und nicht .jsx
Eric Bachhuber
8
danke, du kannst auch erwägen, "files.associations": {"* .js": javascriptreact "} in die settings.json
khoailang
1
Markieren Sie dies als Akzeptierte Antwort
Rohit Luthra
4
Dies ist die beste Antwort im gesamten Internet
uneet7
53

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

"files.associations": {
        "*.js":"javascriptreact"
    }
Punktpunkt
quelle
24

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"
}
jadeallencook
quelle
12

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

twumm
quelle
3
Gibt es eine andere Möglichkeit, JS JSX-Befugnisse zu verleihen?
Cop
5

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.

Ozesh
quelle
Wie deaktiviere ich einen Formatierer für einen einzelnen Arbeitsbereich?
Chris
So geht's:> (1) Gehen Sie zum Abschnitt Erweiterungen. (2) Suchen Sie den JS-CSS-HTML-Formatierer. (3) Gehen Sie zum Drowdown-Menü Deaktivieren. (4) Es muss einen Abschnitt mit der Aufschrift Deaktivieren (Arbeitsbereich)
Ozesh
5

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.

Janos
quelle
5

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"]
Loc Mai
quelle
1

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.

Tal Avissar
quelle
Danke, aber ich habe diese Erweiterung bereits installiert, es hat nicht geholfen.
Omer727
1

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.

Akrom Sprinter
quelle
0

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

JamalGhafari
quelle
Auf jeden Fall nicht die einzige Lösung für dieses Problem
David Wright
0

Ich habe gerade alle oben genannten Kombinationen hinzugefügt.

  1. fügte dies hinzu
"files.associations": {
    "*.js": "javascriptreact"
}
  1. fügte dies auch hinzu
"beautify.ignore": ["**/*.js","**/*.jsx"]
  1. Zusätzliche js-Formatierung gelöscht
  2. schöner installiert
  3. Schalten Sie hübscher und formatierender ein
jamil_4128
quelle
0

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

Laxifan
quelle