How to auto indent jsx in VSCode

问题:

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

Is there any way to fix it.

---

Update:

In Atom:

When I input <div>, atom will show:

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

While in VSCode:

回答1:

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.

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

回答2:

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

alt + shift + f

回答3:

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

回答4:

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