web-dev-qa-db-fra.com

Comment mettre en retrait automatiquement jsx en VSCode

VSCode semble ne pas indenter automatiquement les éléments HTML dans jsx?

 enter image description here

Est-il possible de résoudre ce problème?.

Mettre à jour:

En Atom:

Lorsque je saisis <div>, l'atome indiquera:  enter image description here

Après avoir appuyé sur la touche return, le résultat est (faites attention à l’emplacement du curseur):  enter image description here

En VSCode:

 enter image description here

 enter image description here

reactjsvisual-studio-codejsx
15
zhuscat

Essayez de changer le mode de langue en JavaScript React.

  1. Ouvrez la palette de commandes.
  2. Tapez change language mode
  3. Presse Enter
  4. Tapez javascript react
  5. Presse Enter

Une fois cela fait, vous verrez le mode JavaScript React dans le coin inférieur gauche.

Confirmation of JavaScript React Mode

Une fois que vous êtes dans ce mode, essayez à nouveau de formater le document.

25
Shaun Luttin

Modifiez la langue en Javascript React (voir les autres réponses pour obtenir des instructions), puis utilisez la commande suivante:

alt + shift + f
6
kendotwill

utilisez l'extension "Prettier - Code formateur", de Esben Petersen. il sera automatiquement mis en forme lors de la sauvegarde, en supposant que votre fichier est un fichier jsx.

0
Mo7

1 . Ajouter les paramètres utilisateur à  

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

2. Installer le plugin  

Auto Install Tag

Et recharger. Cela résoudra votre problème. 

BTW, je pense qu'il y a un bug maintenant. Sans les accessoires de composant, l'indentation automatique fonctionne bien, mais avec les accessoires, cela ne fonctionnera pas maintenant. 

<Component>Enter 

===>

<Component>
    :
</Component>

Mais

<Component someProps={10}}Enter

===>

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

Quiconque peut résoudre ce problème, aidez-moi s'il vous plaît :) J'utilise sur mac

0
Juntae