webentwicklung-frage-antwort-db.com.de

Wie man jsx in VSCode automatisch einrückt

VSCode scheint HTML-Elemente in jsx nicht automatisch einzurücken?

enter image description here

Gibt es eine Möglichkeit, das Problem zu beheben?.


Update:

In Atom:

Wenn ich <div> eingebe, zeigt atom: enter image description here

Nachdem ich die return-Taste gedrückt habe, ist das Ergebnis (achten Sie auf die Position des Cursors): enter image description here

In VSCode:

enter image description here

enter image description here

15
zhuscat

Versuchen Sie, den Sprachmodus auf JavaScript React zu ändern.

  1. Öffnen Sie die Befehlspalette.
  2. Typ change language mode
  3. Drücken Sie Enter
  4. Typ javascript react
  5. Drücken Sie Enter

Sobald dies erledigt ist, sehen Sie den JavaScript-Reaktionsmodus in der unteren linken Ecke.

Confirmation of JavaScript React Mode

Versuchen Sie in diesem Modus erneut, das Dokument zu formatieren.

25
Shaun Luttin

Ändern Sie die Sprache in Javascript React (Anweisungen finden Sie in den anderen Antworten). Verwenden Sie dann den folgenden Befehl:

alt + shift + f
6
kendotwill

verwenden Sie die Erweiterung "Prettier - Code formatierer" von Esben Petersen. Es wird beim Speichern automatisch formatiert, vorausgesetzt, Ihre Datei ist eine JSX-Datei.

0
Mo7

1 . Benutzereingaben zu hinzufügen 

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

2. Plugin installieren  

Auto Install Tag

Und neu laden. Es wird Ihr Problem beheben. 

Übrigens, ich glaube, jetzt gibt es einen Fehler. Ohne den automatischen Einzug von Komponentenstützen funktioniert sie gut, aber mit Stützen funktioniert es jetzt nicht. 

<Component>Enter 

===>

<Component>
    :
</Component> 

Aber

<Component someProps={10}}Enter

===>

<Component someProps={10}>
:</Component>

Jeder, der das beheben kann, bitte helft mir :) Ich benutze auf Mac

0
Juntae