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:

Try changing the language mode to JavaScript React.

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.

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

alt + shift + f

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

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

来源：https://stackoverflow.com/questions/40498622/how-to-auto-indent-jsx-in-vscode

标签