VSCode not auto completing HTML

Html Problem Overview

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>)

Html Solutions

Solution 1 - Html

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

Solution 2 - Html

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

Solution 3 - Html

From the 0.3.0 release notes

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

Solution 4 - Html

Here is a cool trick (actually an Emmet abbreviation) :

write the tag name | e.g. h1
add an asterisk after that | e.g. h1*
press Tab | (will result in <h1></h1>)

_{PS: This also works for self-closing tags, such as - input , img etc.}

Solution 5 - Html

You could try this extension for VS Code. It has implemented the auto close tag function and would meet with your requirement:

Automatically add closing tag when you type in the closing bracket of the opening tag
After closing tag is inserted, the cursor is between the opening and closing tag

Solution 6 - Html

Press Ctrl + Shift + P to open the command palette.
Type 'Change Language Mode' in the searcher.
Select 'Change Language Mode'.
Type 'HTML' in the searcher.
And select 'HTML' (it was probably set to 'django-html)

Solution 7 - Html

Change from Django-html to html .

Solution 8 - Html

I've encountered same problem on Mac Sierra (10.12.6) with VSCode (1.30.2), while editing an HTML file. According to the vscode documentations https://code.visualstudio.com/docs/languages/html, the intellisense should work out of box.

Turned out that the "Language Detection" (on the right corner of editor status bar at the bottom of screen) is set to Automatic Detection, and recognized the file as django-html. When manually switched back to plain Html, everything works.

Solution 9 - Html

Press 퐜퐭퐫퐥+퐬퐡퐢퐟퐭+퐏 --> type in 퐂퐡퐚퐧퐠퐞 퐋퐚퐧퐠퐮퐚퐠퐞 퐌퐨퐝퐞 --> then select 퐀퐮퐭퐨 퐃퐞퐭퐞퐜퐭

It works for me.

Solution 10 - Html

File > Preferences > Keymaps, Search 'Auto close' and click on install. If it doesn't work, reload the plugin.

Solution 11 - Html

I was suffering from the same problem,then I uninstalled unnecessary extensions from VS Code along with JavaScript (SE) extension and it worked for me.

Solution 12 - Html

Just check the bottom of your vscode and change the language mode to HTML It might have been showing django-html or click ctrl + shift + p to change the language mode Screenshot

Now click [!] + TAB voila it's done!!!

Solution 13 - Html

If you type

> div.class

and then press TAB, VS code will automatically close the DIV tag with the given CLASS

But I think you want to do this operation by pressing the ENTER key.

In that case, go to your VS Code user setting & paste the following code:

"emmet.includeLanguages": {
    "javascript": "javascriptreact",
    "vue-html": "html",
    "razor": "html",
    "plaintext": "jade"
}

Now if you type

> div.class

& then press the ENTER key, you can see the magic.

However, the above code will make your VS Code auto-completion with ENTER key not only for normal HTML but also the JSX of React, Vue.js snippets will also cover by this.

But If you want to do it only for HTML file, just the following line is enough:

"emmet.includeLanguages": { "javascript": "html" }

Cheers..

Solution 14 - Html

If you want to keep "Django HTML" as the file language and still have auto-closing tags, just add the following to settings.json (provided you have the auto close tag extension installed):

  "auto-close-tag.activationOnLanguage": [
    "django-html",
    (...other languages if needed)
  ],

Solution 15 - Html

Press Ctrl + Shift + P to open the command. Then, type Change Language Mode an select HTML or any other desired language.

Solution 16 - Html

List item Goto Settings: File -> Preferences -> Settings (CTRL + COMMA shortkey in Ubuntu).
In Search Bar type Emmet.
Find Trigger Expansion On Tab and check it.

Content Type	Original Author	Original Content on Stackoverflow
Question	Harvey3589661	View Question on Stackoverflow
Solution 1 - Html	Rabolf	View Answer on Stackoverflow
Solution 2 - Html	Siphamandla Ngwenya	View Answer on Stackoverflow
Solution 3 - Html	John Papa	View Answer on Stackoverflow
Solution 4 - Html	ɢʀᴜɴᴛ	View Answer on Stackoverflow
Solution 5 - Html	Jun Han	View Answer on Stackoverflow
Solution 6 - Html	Khapi	View Answer on Stackoverflow
Solution 7 - Html	Krishna	View Answer on Stackoverflow
Solution 8 - Html	X.X	View Answer on Stackoverflow
Solution 9 - Html	suvalakshmi	View Answer on Stackoverflow
Solution 10 - Html	Dheemanth Bhandarkar	View Answer on Stackoverflow
Solution 11 - Html	ShifaT	View Answer on Stackoverflow
Solution 12 - Html	Otobong	View Answer on Stackoverflow
Solution 13 - Html	IFTEKHAR I ASIF	View Answer on Stackoverflow
Solution 14 - Html	Guillermo Brachetta	View Answer on Stackoverflow
Solution 15 - Html	Ali	View Answer on Stackoverflow
Solution 16 - Html	Syed Shahzaib Hussain	View Answer on Stackoverflow