How to auto indent jsx in VSCode

Question

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:

Shaun Luttin · Answer 1 · 2016-11-10T04:57:58.043

57

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.

edited Nov 10 '16 at 04:57

answered Nov 10 '16 at 04:52

Shaun Luttin

@zhuscat What command are you issuing to format the code? It Works on My Machine (TM). – Shaun Luttin Nov 10 '16 at 16:22
@zhuscat Aha. I thought you were talking about the "Format Document" command. Your question update clarifies what you're needing. – Shaun Luttin Nov 12 '16 at 20:47
7

I just want that when I press the `return` key, there is one more indent compared to the `
` in the example of my question.
– zhuscat Nov 13 '16 at 07:01
2

And I'm wondering if there is any way to automatically add HTML close tag in `jsx` – zhuscat Nov 13 '16 at 10:35
It sounds like what you're looking for are two things @zhuscat. One of them is auto-indent. The other is tag completion. For the latter, have you looked into emmet? – Shaun Luttin Nov 13 '16 at 19:53
1

I installed a plugin called `auto close tag` to solve the "tag completion" problem. However, the `press return key` problem(when I press the return key, I hope there is one more indent compared to the
in the example of my question) is still there.
– zhuscat Nov 14 '16 at 16:19
For closing the tag, you can type for example `div` without brackets, and press tab. I'm having the same issues with auto-indenting though. Actually, it goes to the next line tabbed in, but my problem is that the closing tag doesn't tab back out. – Wylliam Judd Sep 11 '17 at 18:02
This doesn't work when the closing bracket is on a new line: https://giphy.com/gifs/3ohc0Y4D2kzfD2IVNu/html5 – Vlady Veselinov Jan 02 '18 at 18:39

score 54 · Answer 2 · answered Sep 26 '18 at 00:04

54

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

alt + shift + f

answered Sep 26 '18 at 00:04

kendotwill

1

This works on Windows, but not on my Ubuntu, where `alt+shift+f` opens File menu – Magnus Tvedt Jan 18 '19 at 09:35
Does this shortcut uses eslint config for formatting or the default? – I.K. Sep 20 '20 at 18:11
I think it's using the builtin emmet – kendotwill Jan 15 '21 at 02:15
Is there any way so that it formats the code automatically when I save the file? Pressing this key combination is an extra step. – RBT Aug 01 '21 at 12:04

score 2 · Answer 3 · answered Sep 26 '18 at 00:53

2

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

answered Sep 26 '18 at 00:53

Mo7

You need to actually activate that setting as well. – Hjulle Jan 14 '20 at 16:56
The best answer. – Jhonny Mesquita Mar 19 '22 at 20:17
but when we type we to format experice like in .html file – Lisan E Sep 25 '22 at 02:12

score 1 · Answer 4 · answered Oct 14 '18 at 00:31

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

4 Answers4