Vscode: Auto close JSX tags.

[arackaf]

• VSCode Version: 1.16.0
• OS Version: Windows 10

Steps to Reproduce:

1. Create JSX content, ie <div></div>
2. Closing </div> does not auto-insert when you close the opening tag

This is a feature request to make the awesome auto-closing-tag feature work with JSX, instead of just html.

[Igorbek]

I would add that it is desirable that it would work with components as well.

• Type <C
• auto-completion shows options where the user selects Component and press _tab_
• it is expanded to <Component></Component>

[ghost]

@Igorbek it doesn't work for me, auto close tags works in HTML, Handlebars, etc., but not in .js file with JSX syntax.

[Igorbek]

It doesn't for me either :) I extended the feature request. That is what I want.

[ghost]

@Igorbek Oh sorry, I misread your comment 😄

[Igorbek]

no worries, just upvote the feature if you're interested.

[priley86]

+1

[quarleswn]

FYI for anyone else who runs into this: The "auto close tag" extension (https://github.com/formulahendry/vscode-auto-close-tag) implements this and seems to work quite well.

[joshua-turner]

@quarleswn I would avoid that extension, it causes errors with eslint and produces intense CPU spikes. It's likely there's some infinite recursion happening somewhere in there.

It's detailed here: https://github.com/formulahendry/vscode-auto-close-tag/issues/70

[ghost]

Note that the feature described here: https://github.com/Microsoft/vscode/issues/18427
does a lot of what you're looking for I think.

[PolGuixe]

Any working solution?

[gor918]

@PolGuixe As long as the language mode is "Javascript React", it should work

[chuckmasucci]

It's not working as TypeScript React

[laur1s]

Auto tag close not working, this feature is essential.

[bastienGranger]

+1 it does not work for .tsx files. Auto-closing tags works on html native tags but not on custom and React Native tags

[orszaczky]

@gor918 Even with "Javascript React" it's not auto-closing the tags

[daphnegold]

For .jsx files with the mode set to JavaScript React, if I type div and then hit tab then the opening and closing tags are properly generated. If I type <div> the closing tag is not auto-generated. Is this the expected behavior?

One problem is that the Emmet abbreviation is not always the first option in the auto-complete list, for example with the p tag, so it has to be selected manually...

[cmacdonnacha]

@daphnegold , thanks! I was pulling my hair out trying to figure out why <div> would not generate a closing tag. I then tried just divand it worked. I would suggest that even when using <div> it should still auto close the tag.

[theapache64]

I've created a small snippet

{
    "Auto close tag": {
        "prefix": "tag",
        "body": [
            "<$1>",
            "</$1>"
        ]
    }
}

Type tag and then type your Component name, you'll see the magic. (y)

[PolGuixe]

Has it been fixed?

[IllusionMH]

Yep, works for me in VS Code Insider after installing typescript@next as described here

However there is noticeable delay after typing > (in <div>) and when </div> appear, in comparison with simple HTML page or new project created with CRA.
And doesn't close <div> if entered in

<div>
    <div> <- doesn't close here
</div>

@mjbvz should I create separate issue for this delay issue if it depends on project size?

[mjbvz]

Yes this requires TS 3.0+ which is enabled on VS Code insiders. Please open new issues for any problems you see.

@IllusionMH This issue is tracked by https://github.com/Microsoft/TypeScript/issues/25552

[ghost]

Solution is : CTRL + SHIFT + P then type and select "Change Language Mode". Enter javascriptreat

[agavram]

Adding this to my user settings fixed it for me:

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