CODEWITHSUNDEEP
reactjsvisual-studio-codejsx
zhuscat
zhuscat

Reputation: 614

How to auto indent jsx in VSCode

VSCode seems doesn't auto indent HTML elements in jsx?

enter image description here

Is there any way to fix it.

Update:

In Atom:

When I input <div>, atom will show: enter image description here

After I press the return key, the result is(pay attention to the location of the cursor): enter image description here

While in VSCode:

enter image description here

enter image description here

Upvotes: 36

Views: 47481

Answers (4)

ton1
ton1

Reputation: 7628

1. Add user settings to 

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

2. Install plugin

Auto Install Tag

And Reload. It will fix your issue.

BTW, I think there's a bug now. Without component props auto indent work well, but with props, it won't work now.

<Component>Enter

===>

<Component>
    :
</Component>

But

<Component someProps={10}}Enter

===>

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

Anyone who can fix this please help me :) I am using on mac

Upvotes: 1

Mo7
Mo7

Reputation: 129

use the extension "Prettier - Code formatter", by Esben Petersen. it will auto format on save, assuming your file is a jsx file.

Upvotes: 4

kendotwill
kendotwill

Reputation: 2020

Change the language to Javascript React (see other answers for instructions) then use the following command:

alt + shift + f

Upvotes: 61

Shaun Luttin
Shaun Luttin

Reputation: 141512

Try changing the language mode to JavaScript React.

  1. Open the commands palette.
  2. Type change language mode
  3. Press Enter
  4. Type javascript react
  5. Press Enter

Once that's done, you'll see the JavaScript React mode in the bottom left corner.

Confirmation of JavaScript React Mode

Once you're in that mode, try again to format the document.

Upvotes: 57

Related Questions