Unlimited WordPress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
FREELessons:11Length:33 minutes

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.2 Auto Close Tag

The Auto Close Tag snippet does just what you would expect. It automatically creates a closing HTML tag after having created its opening counterpart.

Related Links

2.2 Auto Close Tag

Hello and welcome back. In this lesson we're gonna talk about another plug in very similar to the last one we talked about and this one is called auto close tag. And it does exactly what the name implies, basically if you were to type in a tag, such as an anchor tag and then we'll put our greater than sign here, you'll notice that if we type out our tags that way it's not gonna automatically create the closing tag for it. Now, since we've got HTML snippets installed, we can just type in a and hit Enter and it will fill all that out for us. But if you're not using something like HTML snippets then the auto close tag plug in can be very helpful for you. So I figured it was worth pointing out that even though you might not use both of these at the same time. So let's jump over to our extensions button here and I'm gonna do a search for auto close. And there we go, auto close tag is the first one that shows up. As always, we can click on the search result to see that in action. And we have this nice little animated GIF here of that happening. If for some reason you don't see this animated GIF working, you just see a broken image here, you can always just go online and you can do a search for Visual Studio Code auto close tag. And it will basically give you this same page if you go to the right search result. And the animated GIF there will be working. Sometimes, for some reason these just don't show up like they should. But anyways, the auto close tag really allows you to just start typing. And once you create your opening tag it's automatically gonna create the close tag for you. So it's something that can save you a little bit of time again if you're not using something like the HTML snippets plugin. So I'm just gonna click to install this. Once we install it we're gonna reload the window and then we'll go into our HTML here. So we can go to our file browser here if we want to. I'm still just in this test.html file and nothing real exciting there but let's say we have a paragraph that we want to create. So we create our opening paragraph tag and it's as simple as this when we create our closing angle bracket here. It automatically creates our closing paragraph tag for us. And then we can immediately start typing inside that paragraph. So that's really all there is to this particular plugin. Again, we can always go back to our extensions and look at all of our installed plugins here. If you don't see that, if you just see the marketplace, for example, then you can go to this drop down here and just click on Show Installed Extensions and it will show all the ones you've already installed. But as always, if you decide not to use it we can come back to the tag itself, click on the little gear icon, and click on disable or uninstall in order to get rid of it. But that's how you use the auto close tag plugin in Visual Studio Code. Thank you for watching.

Back to the top