10

Let's say I have this code in .jsx file:

Code sample

Now if I type, for example, BrowserRouter and hit Tab I got this state which is still ok:

enter image description here

But now when I hit Enter, I have this state:

enter image description here

How do I make it work like in .html files that pressing Enter adds two new lines and makes auto indentation? Like that:

enter image description here

I have VS Code v1.20.1 and my preferences which could be related to this issue are as follows:

"emmet.triggerExpansionOnTab": true,
"emmet.includeLanguages": {
    "javascript": "javascriptreact"
}

I've searched through Github issues of VS Code and seems like it was fixed about half a year ago and should work now, but for some reason it's not. Also I've run VS Code with --disable-extensions flag for this so it's not an extension problem.

I've also found that it seems not to work for top-level tag only. For anything inside it the indentation works like in .html files. Strange.

Thank you.

1valdis
  • 1,009
  • 1
  • 15
  • 27
  • Hey, long ago - but did you find any solution? I've met the completely same issue now - with the most recent VSC version.. Very irritating( – Alex Green Nov 02 '18 at 08:08
  • @AlexGreen No, I haven't found a solution. I don't write jsx that often now because of my current work on backend, so I haven't been digging too deep to resolve the issue. – 1valdis Nov 05 '18 at 08:28
  • 1
    This answer worked for me: https://stackoverflow.com/a/40520170/3347508 – 5tormTrooper Mar 19 '19 at 04:57
  • @5tormTrooper I had passed by that answer too before I asked this question, but I had "JavaScript React" mode already on. – 1valdis Mar 19 '19 at 16:11
  • Still looking for an answer to this, 2022. Any luck? It's annoying that it is not indent new lines inside of html/component tags... – Douglas Gaskell Apr 14 '22 at 06:46

0 Answers0