Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[html] VSCode doesn't automatically close HTML tags #2246

Closed
johnyradio opened this issue Jan 25, 2016 · 18 comments
Closed

[html] VSCode doesn't automatically close HTML tags #2246

johnyradio opened this issue Jan 25, 2016 · 18 comments
Assignees
Labels
feature-request Request for new features or functionality html HTML support issues on-testplan
Milestone

Comments

@johnyradio
Copy link

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>
@aeschli aeschli added the html HTML support issues label Jan 26, 2016
@aeschli aeschli self-assigned this Jan 26, 2016
@aeschli aeschli added the bug Issue identified by VS Code Team member as probable bug label Jan 27, 2016
@aeschli aeschli added this to the Backlog milestone Jan 27, 2016
@aeschli aeschli changed the title VSCode doesn't automatically close HTML tags [html] VSCode doesn't automatically close HTML tags Jan 27, 2016
@cindoum
Copy link

cindoum commented Jun 17, 2016

any update on it?

@aeschli
Copy link
Contributor

aeschli commented Jun 17, 2016

@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
Copy link

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
Copy link

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

@glen-84
Copy link

glen-84 commented Sep 10, 2016

Duplicate of #502 (?)

@aeschli
Copy link
Contributor

aeschli commented Sep 12, 2016

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

@josemi-ca
Copy link

+1 This makes coding faster.

@aeschli aeschli added feature-request Request for new features or functionality and removed bug Issue identified by VS Code Team member as probable bug labels Feb 22, 2017
@kieferrm kieferrm mentioned this issue Mar 6, 2017
58 tasks
@richeklein
Copy link

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
Copy link
Member

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>
    Visual Studio
  • Sublime Text mode: <script></ --> <script></script>
    Sublime Text

@doivosevic
Copy link

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
Copy link

stofte commented May 17, 2017

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
Copy link
Contributor

aeschli commented Aug 28, 2017

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
Copy link
Member

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

@rosieks
Copy link

rosieks commented Sep 2, 2017

Does it work also with JSX/TSX?

@aeschli
Copy link
Contributor

aeschli commented Sep 4, 2017

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

@johnyradio
Copy link
Author

Thx, @aeschli , you rock!

@johnyradio
Copy link
Author

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

@formulahendry
Copy link
Member

@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.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
feature-request Request for new features or functionality html HTML support issues on-testplan
Projects
None yet
Development

No branches or pull requests