Vscode: [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.

[vscode-triage-bot]

This feature request is now a candidate for our backlog. The community has 60 days to upvote the issue. If it receives 20 upvotes we will move it to our backlog. If not, we will close it. To learn more about how we handle feature requests, please see our documentation.

Happy Coding!

[vscode-triage-bot]

:slightly_smiling_face: This feature request received a sufficient number of community upvotes and we moved it to our backlog. To learn more about how we handle feature requests, please see our documentation.

Happy Coding!