Automatically inserting JSX closing element in TypeScript JSX file

[yuit]

Currently, when users type non self-closing JSX tag, they will have to type corresponding closing JSX tag. In this situation, our language service can help the users by automatically insert the corresponding JSX tag. The newly inserted tag should respect existing format and If the matching closing tag exists, the closing tag should not be insert.

var x = <div> [insert by language-service] </div>
var y =
<div>
[insert by language-service]</div>
var z = 
    <div>
     [insert by language-service] </div>

[RyanCavanaugh]

@mhegazy I was thinking we would do this as a "formatting" edit provided by the language service, rather than in the VS layer. Thoughts?

[mhegazy]

Well, i think this more akin of doc comment scaffolding, and brace completion, the host needs to ask about it. formatting could be disabled, and or not invoked if you just moved the cursor..

[rosieks]

As part of that it would nice to have two additional improvements to JSX/TSX experience that already is supported by HTML editor.

1. Automatically change closing tag while opening tag is changing.
2. Wrap with <div> (Shift + Alt + W)

[rosieks]

Does it mean that you have no plans to implement this feature?https://visualstudio.uservoice.com/forums/121579-visual-studio-ide/suggestions/12584319-provide-automatic-tag-closing-in-jsx-tsx

[feafarot]

Any updates on this issue?

[AndyBraham]

This is quite an annoying bug and makes Visual Studio 2019 pretty much useless. Only way I have found to get around this was to find a copy of VS2017 where it still worked. When is MS going to figure out that its the users that keep these products going, stop telling us what to use and not to use, please fix this feature.

[ChristopherHaws]

Not sure if this is a separate feature or related, but I also wish that the closing tag would rename along with the opening tag like they do in html and cshtml files in VS.

[boboPD]

Its been nearly 4 years since this issue was opened. Any updates on whether it will be taken up at all?

[AndyBraham]

I was able to get this somewhat working, I found that if you escape out of the initial context menu (press esc) after entering <div></ then hit CTRL + Space then it will insert the closing tag <div></div>. For some reason they added an extra key stroke to finish the autocomplete.

[erikmartinessanches]

This is quite an annoying bug and makes Visual Studio 2019 pretty much useless. Only way I have found to get around this was to find a copy of VS2017 where it still worked. When is MS going to figure out that its the users that keep these products going, stop telling us what to use and not to use, please fix this feature.

I'm on VS 2017 but this doesn't work for me in tsx files. For example, I'm expecting to see </ul>appear after typing <ul>, is this the correct expecated behavior?

[danielo515]

Does this affect VSCode on js files too?

[michaelrinderle]

bump. ^^^ still a problem with VS2019. shouldn't the premium IDE have an auto close on HTML tags in JSX/TSX files???

[aminya]

Does tsserver support auto-closing JSX tags?

[Eli-Black-Work]

I believe this worked before: https://github.com/Microsoft/TypeScript/issues/15897 🙂

Does anyone know how it got broken?

[Eli-Black-Work]

Bumping again 🙂 Autocomplete of JSX closing tags in Visual Studio 2019 is broken, which, IMHO, seems like it should be a pretty high priority item 😉

@RyanCavanaugh Sorry to tag you personally, but would you be the person to look into this?

[Eli-Black-Work]

Sorry, but just following up on this. @mhegazy, do you perhaps know who we should contact about this? It's an important issue for Visual Studio, I think 🙂

[Reckoning47]

I'd like to bump this as well. If there's anyone who is able to find a fix--I've tried multiple typescript extension versions. I've also noted that Visual Studio 2019 Pro is unable to import React from 'react' for newly created files. I have to restart the IDE for the reference to be resolved.

[RyanCavanaugh]

cc @uniqueiniquity

[uniqueiniquity]

Hi @Reckoning47 - I'm sorry you're experiencing this issue with Visual Studio 2019. Could you please use the Report A Problem functionality in Visual Studio to provide a recording of the issue? Thank you!

[Reckoning47]

The screen recording does not pick up the autocomplete window, but I was able to capture the essence of what I am trying to get. I have autoclosing tags enabled, yet they do not autoclose or even suggest to close the element correctly. The Report A Problem page redirects to this issue.

[Eli-Black-Work]

The issue that I'm seeing is slightly different, but I think it might still be related to this 🙂

1. Create a new .jsx file
2. Add a return() statement, so that you can return some HTML.
3. Add an opening tag, such as <div>
4. Type </di and autocomplete: The closing tag that you began typing (</di) is transformed into an opening tag (<div>), and the / is lost. That is, when the closing tag is autocompleted, it gets converted into an opening tag.

I've reported a problem at https://developercommunity.visualstudio.com/t/autocomplete-in-jsx-files-changes-closing-tags-int/1478145?from=email . It includes a recording of the problem.

I'm seeing this issue in the latest version of Visual Studio 2019.

The issue appears to also have been reported here: https://developercommunity.visualstudio.com/t/When-I-wrote-tsx-tags-are-not-closing-au/1106328

[aminya]

This is broken for TSServer too. I don't get completion for JSX elements inside Atom, which uses TSServer.

[InariTheFox]

Hi @Reckoning47 - I'm sorry you're experiencing this issue with Visual Studio 2019. Could you please use the Report A Problem functionality in Visual Studio to provide a recording of the issue? Thank you!

Visual Studio feedback team has kicked this back over to the TypeScript team. This issue has been on-going for several years now! I pay thousands a year to get a premium IDE with these features, and yet time and again, I have to resort to using a free product - from the same company - in order to be productive with my development. I am not alone in this issue. Please, someone take responsibility for this and resolve it, as soon as possible! This has been going on for too long.

[mk-16]

Solved it !!! I don't know how can I record it, but simply said in Visual Studio (Community at least) Tools => Options => Text Editor => JavaScript/TypeScript => Intellisense uncheck the box "Only use Tab or Enter to Commit"

hope this works and makes your day

[olmobrutall]

True! It works for me using VS 2022.

To clarify, unchecking "Only use Tab or Enter to Commit" will help here:

<div></

But not here

<div>

[Eli-Black-Work]

Wow, thanks for that fix, @mk-16!! ^_^

To anyone who's experiencing this issue, please upvote the two Visual Studio bug reports about this 🙂

• https://developercommunity.visualstudio.com/t/When-I-wrote-tsx-tags-are-not-closing-au/1106328
• https://developercommunity.visualstudio.com/t/autocomplete-in-jsx-files-changes-closing-tags-int/1478145?from=email

[Eli-Black-Work]

@uniqueiniquity, You assigned this to @rakatyal. Is that still correct? 🙂

There are two items in this Github issue:

• Feature request: Make it so that VS automatically inserts closing tags.
• Bug report: The autocomplete for the closing tag is wrong (e.g. It autocompletes with <div> when it should autocomplete with </div>)

Would it be helpful for us to split the bug off into a separate issue?

Thanks 🙂