[html] Automatically delete HTML closing tag when converting to self-closing tag

[hb20007]

A simple but useful feature would be to automatically delete an HTML or a JSX closing tag when converting to a self-closing tag.

In the latest version of VS Code (1.27.1), in order to go from

<App><App>

to

<App />

,

I need to do the following:

<App /></App>

and then manually delete the closing tag. It would be great if, at this point, VS Code would do that automatically.

I think it's simple enough and would be a nice feature especially for web developers who use Emmet. Therefore, it could be a core feature.

I tried searching for an extension that does this, but I was not able to find any. If an extension already exists, please link it here.

This is not a duplicate of any of the issues linked by the experimental duplicate detection.

[vscodebot[bot]]

(Experimental duplicate detection) Thanks for submitting this issue. Please also check if it is already covered by an existing one, like:

• closing tag in html (#45367)
• Identation inside existing tag broken (#57968)
• [html] For auto close tag, after finish type the code, quick press 'tab' to move the cursor to the end of the close tag (#45402)

[clocky]

As noted by @TanelVari, Visual Studio for Windows has the expected behaviour in this instance; the automatically added closing tag gets removed when the opening tag is updated into an self-closing tag:

[hb20007]

@clocky @TanelVari This does not work in the latest version of VS Code for Windows (v1.30.2)

[TanelVari]

@hb20007, @clocky meant the full Visual Studio, not VS Code. This request still stays

[VadimGorbenko]

It will be good if it will work. For now, you can just add / in the end of your tag. Example: App + tab expanded to <App></App> App/ + tab expanded to <App/> App[test=test]/ + tab expanded to <App test="test"/>

[faisal6621]

Strange, why this issue has not been taken into account? I am also facing the same issue. This issue is not a duplicate as emphasized by @hb20007

Version: 1.41.1
Commit: 26076a4de974ead31f97692a0d32f90d735645c0
Date: 2019-12-18T15:04:31.999Z
Electron: 6.1.5
Chrome: 76.0.3809.146
Node.js: 12.4.0
V8: 7.6.303.31-electron.0
OS: Linux x64 5.3.0-26-generic

[Lagily]

would be great to get this!

[tsachit]

It will be good if it will work. For now, you can just add / in the end of your tag. Example: App + tab expanded to <App></App> App/ + tab expanded to <App/> App[test=test]/ + tab expanded to <App test="test"/>

Thanks, it's been a while I didn't use this feature and I looking for changes, because this use to work before. Guess they made changes to explicitly define the type of tag.

[matrixcloud]

Would be great to get this.

[aityahiaidir]

Hello, there is any news since time on implementation of this feature ?

[kirkbross]

I'm running Visual Studio Code -- what does (user setup) mean?

Version: 1.54.1 (user setup)
Commit: f30a9b73e8ffc278e71575118b6bf568f04587c8
Date: 2021-03-04T22:38:31.419Z
Electron: 11.3.0
Chrome: 87.0.4280.141
Node.js: 12.18.3
V8: 8.7.220.31-electron.0
OS: Windows_NT x64 10.0.18363

Like many above, closing tags do not get removed if you convert the opening tag to a self-closing tag.

Do I need to do something or is this not implemented yet?

[TargiX]

Please can you make this implemented, it really affects everyday code typing experience

[ManuRodgers]

is this issue solved?

[hb20007]

No

[HeSingh93]

Has this issue been resolved?

[hb20007]

No