[html] VSCode doesn't automatically close HTML tags

[johnyradio]

in html file-type
vscode version 0.10.6

My User Settings config says:
"editor.autoClosingBrackets": true,

but it still doesn't work.

For example, when you type in "<script" the IntelliSense suggestions pops up and you press enter on "script" it doesn't close the tag like this:

<script>
</script>

but it stays like this:

<script>

[cindoum]

any update on it?

[aeschli]

@cindoum Sorry, no, we currently have no plans adding this.
I recommend you using the emmet expansion
enter script, press tab. This expand to <script></script>

[mahomedh]

You can use the "Auto Close Tag" extension to replace this behaviour. IMO this is better so that VSCode can stay light and people can "enable" features with the extension of choice.

https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag

[Peter-Juhasz]

It is so essential that it should be part of the HTML language service.

[glen-84]

Duplicate of #502 (?)

[aeschli]

Yes, #502 is the same. I'll close #502 as dup.

[josemi-ca]

+1 This makes coding faster.

[richeklein]

Perhaps this is better as a separate feature request, but it would be useful to integrate auto tag renaming. It's currently available as a popular extension. Thanks.

[formulahendry]

You may want to use Auto Close Tag extension, and it supports for both Visual Studio mode and Sublime Text mode.

• Visual Studio mode: <script> --> <script></script>
  
• Sublime Text mode: <script></ --> <script></script>
  

[doivosevic]

Can't you use the https://code.visualstudio.com/docs/extensionAPI/extension-points#_contributeslanguages ?

autoClosingPairs - Defines the open and close symbols for the auto-close functionality. When an open symbol is entered, the editor will insert the close symbol automatically. Auto closing pairs optionally take a notIn parameter to deactivate a pair inside strings or comments.

[stofte]

Feature makes it slightly annoying to add HTML to existing tags as it prefers to close the parent tag, instead of creating a new opening tag (I'll have to untrain hitting enter when writing HTML). Esp common occurence with div soup.

[aeschli]

I added auto-close to the built-in HTML language support:

• typing the > of <sometag> will add the closing tag </sometag>.
• typing / of </ will also close the tag.
• this behaviour is enabled by default and can be turned off with setting html.autoClosingTags

Thanks @formulahendry for leading the way with his extension. Note that the auto-close extension has more features, in particular, configurable support for more languages.
Jun, if you can add a check for the new setting that would be great, so the auto-close extension can co-exist with the new support.

[formulahendry]

Thanks @aeschli , that's cool! I will take a look.

[rosieks]

Does it work also with JSX/TSX?

[aeschli]

@rosieks No, this is only for html, handlebars and razor files.

[johnyradio]

Thx, @aeschli , you rock!

[johnyradio]

@formulahendry , how is @aeschli 's solution different from the Auto Close Tag extension?

[formulahendry]

@johnyradio

@aeschli 's solution is leveraging the VSCode built-in HTML extension. It could distinguish HTML and embedded languages well. So when you write embedded languages inside HTML, there will not be improper auto-close if you write generic like formulahendry/vscode-auto-close-tag#17. While the limitation is that it only works on html, handlebars and razor files.

For Auto Close Tag extension, it is based on regular expression. So it works for any languages, while the limitation is that it could not distinguish HTML and embedded languages.