VSCode not auto completing HTML

97
votes

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

15
htmlintellisensevisual-studio-code
1.you can use Auto Close Tag ,it can fullfill your requirement. - jialin wang
2.enter a tagname such as div ,then enter tab key twice ,it will autocomplete the whoe tag ----- > <div></div> - jialin wang
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. - tcanbolat

15 Answers

46
votes

From the 0.3.0 release notes

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

186
votes

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 :

  1. type <div
  2. press Tab
  3. press Tab

it will add the closing tag

88
votes

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

25
votes

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.

16
votes

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
10
votes
  1. Press Ctrl + Shift + P to open the command palette.
  2. Type 'Change Language Mode' in the searcher.
  3. Select 'Change Language Mode'.
  4. Type 'HTML' in the searcher.
  5. And select 'HTML' (it was probably set to 'django-html)
7
votes

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.

6
votes

Change from Django-html to html .enter image description here

4
votes

Press 𝐜𝐭𝐫𝐥+𝐬𝐡𝐢𝐟𝐭+𝐏 --> type in 𝐂𝐡𝐚𝐧𝐠𝐞 𝐋𝐚𝐧𝐠𝐮𝐚𝐠𝐞 𝐌𝐨𝐝𝐞 --> then select 𝐀𝐮𝐭𝐨 𝐃𝐞𝐭𝐞𝐜𝐭

It works for me.

2
votes

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

1
votes

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.

1
votes

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

1
votes

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

0
votes

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

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