VSCode not auto completing HTML

C

17

126

I'm having trouble with my new installed Visual Studio Code on Windows 7. On Mac the editor automatically closes html tags but on my Win7 not. I assume there must be some option to turn it on but I can't find any.

I'm talking about when eg. writing <html the intelliSense pops up and you click enter, usually it automatically puts in the </html> mine's not working. (The IntelliSense pops up but when you select one of the options it doesn't auto close the tag: <h1> -> </h1>)

Cupreous answered 7/6, 2015 at 18:14 Comment(3)

1.you can use Auto Close Tag ,it can fullfill your requirement. – Leguminous 8/9, 2017 at 9:58

2.enter a tagname such as div ,then enter tab key twice ,it will autocomplete the whoe tag ----- > <div></div> – Leguminous 8/9, 2017 at 10:5

you can also create <div> elements with class or id names automatically. in you editor type .someclassname and press tab. you will get <div class"someclassname"></div>. or just put a # instead of the period and press tab after the name and it will give you a <div> with a id attached. – Big 23/7, 2021 at 2:43

N

52

From the 0.3.0 release notes

HTML auto closing of tags has now been removed and replaced with smarter IntelliSense on </.

Noranorah answered 8/6, 2015 at 1:32 Comment(8)

Oh, that's not something I hoped for. Is there any way to bring it back? Modify some files or download something? I'd like to use VSCode but with auto completion. Thanks. – Cupreous 8/6, 2015 at 14:27

you can always add a request on their site with uservoice – Noranorah 10/6, 2015 at 22:48

Did that, hopefully they bring it back. Thanks for the help. I'm doing Angular development in VSCode. Seems to work well with it so far. – Cupreous 11/6, 2015 at 1:5

I was looking for this as well, but I do notice using tab works for me in 0.10.6. E.g. type div (without the <>) then press tab straight away, and it enters <div></div>. Not exactly the same, but may be of use. Doco for these shortcuts (emmet) here – Salient 27/12, 2015 at 1:43

yes, that is due to Emmet. Emmet let's us type element names without the braces and it will add what is needed. It's really powerful. – Noranorah 8/1, 2016 at 15:28

This does not work for me on VS Code 1.5.3. If I type <div> then </ it does not close / complete the tag. Anything I'm missing here? – Bainbridge 5/10, 2016 at 10:27

Just typing div without <> and then pressing tab doesn't work anymore after the latest updates. Is there a way to re-enable this? – Marcie 7/9, 2017 at 13:31

@Salient that by itself should be an answer. thats so useful – Cardamom 18/12, 2018 at 2:25

H

216

Type the tag name (without starting <) then press Tab

for example type div then press tab and VS will convert it to <div></div>

Or type the opening tag then press Tab twice

for example :

type <div
press Tab
press Tab

it will add the closing tag

Hollins answered 5/6, 2016 at 5:2 Comment(10)

What about self closing tags (e.g. <input />)? – Cocci 23/8, 2016 at 16:52

just type input and press Tab twice, VS Code will auto complete it to <input type="text"> – Italianism 30/9, 2016 at 3:50

Just want to add that this is part of Emmet functionality, which allows you to easily generate more complex HTML structure, not only tag pairs. For examples you can read this, or just google for Emmet. – Twinflower 26/4, 2017 at 11:31

@Rabolf can you mention some other cool HMTL shortcuts for VS Code? – Jessiejessika 2/5, 2017 at 11:44

@eMAD unfortunately I did not continue using VS Code – Hollins 2/5, 2017 at 12:54

First suggestion works excellently - thanks! Second suggestion doesn't really work anymore, as you end up with <<div></div> after the first tab. So just continue typing div and then Tab :) – Rhesus 3/10, 2017 at 4:43

It works perfectly ! No need of installing extensions ! But the thing is you have to change your habit while using other editors. – Mustachio 15/4, 2018 at 9:11

It is not working for me. Is there anything else I need to check? – Alcides 7/7, 2018 at 5:8

The answer below solved it for me. I am editing a .HTML file but VS Code was in the language mode for Nunjucks. – Supinate 14/4, 2021 at 17:56

Thank you. That was the quickest and most helpful answer I've had to a question in ages. I was adding the opening bracket which kills the autocomplete. – Brevet 10/8, 2022 at 23:32

S

212

I was experiencing the same problem, then i saw something on my bottom right of vs code.. instead of using HTML, i was using Django-HTML, so i changed the language to html, Boom everything is working fine again.see image

Schulte answered 20/12, 2018 at 23:3 Comment(8)

Had a similar problem, but in my case I realised I was writing HTML into a PHP file. Suppose I won't be able to make use of autoclosing tags for as long as I am. – Oliy 24/6, 2019 at 21:48

is not necesary to change language, only add to settings.json "emmet.includeLanguages": { "django-html": "html"} – Epicycloid 31/12, 2020 at 23:33

I fixed my Twig templates not intellisensing HTML thanks to @Epicycloid comment above. Ctrl+Shift+p -> open Perferences: Open Settings (UI) -> search for includedLanguages -> found Emmet Included Languages -> input Item: twig; Value: html -> press Add item -> enjoy. – Shuma 8/1, 2021 at 13:5

You just saved me, I've been stuck with these for months, until I had the time today of looking into it, I was totally going to reinstall vs and start again when I came into your answer. Awesome. – Miticide 20/3, 2021 at 1:47

Mine was on a go html template. This saved me a bunch of time. Thanks! – Phyllode 10/9, 2021 at 17:42

I had this same issue too, checked the screenshot you sent and I was able to resolve mine the same way. I was using django_html too instead of html, thanks – Direction 12/7, 2022 at 7:28

I have writing Django, so the problem you mentioned happens. This works for me. – Rescript 15/2, 2023 at 8:3

Thanks @Siphamandla Ngwenya. How can I get both HTML and Django features in a file ? – Bobcat 14/3 at 4:50