Vscode: JSX Interpolation Issue with Embedded JavaScript Expressions

[andrewjmead]

• VSCode Version: 1.42.1
• OS Version: macOS Catalina 10.15.2

Steps to Reproduce:

1. Create a JavaScript file
2. Paste in the following code:

const someJSX = (
    <p>{</p>
)

1. Add the closing curly brace for the expression.

Expected result:

const someJSX = (
    <p>{}</p>
)

Actual result:

const someJSX = (
<p>{}</p>
)

I noticed this come up sometime within the last month. I found others with the same issue here and here.

Does this issue occur when all extensions are disabled?: Yes

I have tested this without extensions. I have also tested this with both javascript and javascriptreact language modes. I have a very minimal set of user settings shown below:

{
    "workbench.startupEditor": "newUntitledFile",
    "editor.fontSize": 13,
    "editor.hover.enabled": false
}

Thanks for taking a look.

[andrewjmead]

I ran some tests on my end, and this issue seems to have first come up in v1.40. Things worked as expected with v1.39 and v1.38.

[mjbvz]

As a partial workaround, set "editor.formatOnType": true. This still de-dents on } but then immediately re-indents things

[andrewjmead]

Yeah. It's a little jumpy, but it does indeed work. For the moment, I'll stick with 1.39.

[dormesica]

If I got some direction on where to start looking I would be glad to help with that.

[andrewjmead]

I was digging around in extensions/javascript/, but I have no idea if that's the right place or not. I'd also love to know.

[mjbvz]

This probably needs to be fixed in core VS Code. I suspect our indentation rules have a bug around mixed language files (we have different indentation rules for inside jsx tags and for regular JS)

@rebornix Do you have any suggestions on where someone would start investigating this issue?

[JW9506]

Glad somebody brings this up. It isn't a huge issue but it does throw people off when something suddenly indents your code.

[JW9506]

I figured simply selecting "Advanced" in Editor: Auto Indent will resolve this issue

[dougkrahmer]

I was going to report this issue too. Hopefully a fix can be committed soon. I've tried the Auto Indent: Advanced workaround, and it seems to work without unwanted side effects in JS and JSX. I am worried about the impact of the setting on other language, as it will vary based on how they define their own indentation rules.

[u3u]

As a supplement, can the closing curly brace be typed automatically in jsx/tsx?

[rebornix]

I pushed a change to stop any auto indentation if the line contains multiple languages (in this case it's jsx and typescript).