120

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

3
  • 1.you can use Auto Close Tag ,it can fullfill your requirement. Sep 8, 2017 at 9:58
  • 2
    2.enter a tagname such as div ,then enter tab key twice ,it will autocomplete the whoe tag ----- > <div></div> Sep 8, 2017 at 10:05
  • 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
    Jul 23, 2021 at 2:43

17 Answers 17

209

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

10
  • 2
    What about self closing tags (e.g. <input />)? Aug 23, 2016 at 16:52
  • 1
    just type input and press Tab twice, VS Code will auto complete it to <input type="text"> Sep 30, 2016 at 3:50
  • 2
    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.
    – Alex Che
    Apr 26, 2017 at 11:31
  • 1
    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 :)
    – Tim Malone
    Oct 3, 2017 at 4:43
  • 2
    It is not working for me. Is there anything else I need to check? Jul 7, 2018 at 5:08
183

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

8
  • 1
    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. Jun 24, 2019 at 21:48
  • 7
    is not necesary to change language, only add to settings.json "emmet.includeLanguages": { "django-html": "html"} Dec 31, 2020 at 23:33
  • 1
    I fixed my Twig templates not intellisensing HTML thanks to @raultedesco 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. Jan 8, 2021 at 13:05
  • 2
    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. Mar 20, 2021 at 1:47
  • 2
    Thanks a lot. Saved tons of my time!! Sep 24, 2021 at 5:54
50

From the 0.3.0 release notes

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

8
  • 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. Jun 8, 2015 at 14:27
  • 63
    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
    – peterc
    Dec 27, 2015 at 1:43
  • 4
    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.
    – John Papa
    Jan 8, 2016 at 15:28
  • 3
    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? Oct 5, 2016 at 10:27
  • 4
    Just typing div without <> and then pressing tab doesn't work anymore after the latest updates. Is there a way to re-enable this?
    – Kokodoko
    Sep 7, 2017 at 13:31
32

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.

7
  • 1
    @Kokodoko Yes it does :P Sep 7, 2017 at 13:55
  • That's so weird..... I'm not sure what setting to change to re-enable it...
    – Kokodoko
    Sep 7, 2017 at 19:40
  • 1
    @Kokodoko you should have the emmet extension installed.
    – Sudhanshu
    Nov 11, 2017 at 10:11
  • 1
    This works, but there's no need to include the *. 1.21.0
    – Sauce
    Mar 13, 2018 at 16:50
  • 1
    @BlueClouds yes and any of them that provides html abbreviation support, should work. By a generic rule, I use the one with max installs.
    – Sudhanshu
    Mar 30, 2018 at 3:17
19
  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)
0
17

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

0
16

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
2
  • This is what I needed. Works like Brackets now, which is great. Thanks! Oct 18, 2016 at 14:03
  • Yeah but... it was enabled in earlier versions of VS Code. Isn't this just a setting somewhere in the maze of settings.json?
    – Kokodoko
    Sep 7, 2017 at 13:32
9

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

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

It works for me.

3
  • 2
    I don't see anything new in this answer
    – Vega
    Aug 26, 2020 at 17:37
  • @Vega I think this is still helpful for the new VSCode user like me.
    – Arefe
    Aug 10, 2021 at 5:36
  • Have you checked that this is not be already said in other answers?
    – Vega
    Aug 10, 2021 at 5:41
4

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

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

2

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

1

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

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

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

0

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.