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
reactjs
visual-studio-code
jsx
omer727
quelle
quelle
Antworten:
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
quelle
Ändern Sie die Einstellungen für die vscode-Einstellungen> Benutzereinstellungen unten:
"files.associations": { "*.js":"javascriptreact" }
quelle
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" }
quelle
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
quelle
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.
quelle
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.quelle
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"]
quelle
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.
quelle
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.
quelle
Ich musste die JS-CSS-HTML Formatter-Erweiterung in VSC deaktivieren. einzige Lösung für dieses Problem
quelle
Ich habe gerade alle oben genannten Kombinationen hinzugefügt.
"files.associations": { "*.js": "javascriptreact" }
"beautify.ignore": ["**/*.js","**/*.jsx"]
quelle
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
quelle