Reputation: 1295

VSCode not auto completing HTML

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

Upvotes: 128

Answers (17)

tisohjung

Reputation: 31

Goto Settings cmd+,

find Emmet: Included Languages add

add Item django-html Value html

Upvotes: 1

Fuad Alizade

Reputation: 31

If HTML tags autocompleting issue is on JavaScript files, then you just need to change "select language mode" from "JavaScript" to "JavaScript React".

Upvotes: 2

Guillermo Brachetta

Reputation: 4745

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

Upvotes: 5

Krishna

Reputation: 347

Change from Django-html to html .

Upvotes: 26

Syed Shahzaib Hussain

Reputation: 322

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.

Upvotes: 8

IFTEKHAR I ASIF

Reputation: 395

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

Upvotes: 2

suvalakshmi

Reputation: 61

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

It works for me.

Upvotes: 6

Otee

Reputation: 108

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

Upvotes: 1

Mehedi Hasan Shifat

Reputation: 720

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.

Upvotes: 1

Ali

Reputation: 684

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

Upvotes: 2

Khapi

Reputation: 650

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)

Upvotes: 19

John Papa

Reputation: 22298

From the 0.3.0 release notes

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

Upvotes: 53

X.X

Reputation: 981

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.

Upvotes: 9

Siphamandla Ngwenya

Reputation: 3064

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

Upvotes: 226