Easy Way to Make a Div in HTML (using VS Code)

Although I am new to web development, I can 100% appreciate a shortcut for writing code.

While I was watching a tutorial video, I saw someone use this shortcut for making a div with a class name or id name in VS code. It blew my mind and I just had to share!

Instead of writing out the complete div tag plus the class or id name, write the class name with a period in front of it, or the id name with a pound symbol in front of it. Press enter and you're done.

To make a div with a class name:

press enter

To make a div with an id name:

press enter

P.S. I hate to admit it, but I feel 10x cooler when I make my divs this way!

Comments

[Ascentrick]

I felt cool making my divs this way too buddy but then I tried to super-customize vscode and somehow it does not do it anymore !

[BT-H]

this is great! after messing around a bit there's also a shorter way.
.div will create a div class and #div will create a div ID

[Casey Spaulding]

Thanks

[JAReichert]

I have used this over and over again since you shared this tip. Thank you!

[Ciara Cloud]

Yay! :)

[Ciara Cloud]

So cool!

[Matt Curcio]

I have also just started using VS Code and I am amazed and blown away by all the features it has.
Thanks for your tip! ;)

[Ciara Cloud]

I am as well!!

[Robson Muniz]

This is Emmet, it helps a lot I use it all the time...
After creating those you can learn how to easily center them.

dev.to/robsonmuniz16/3-ways-to-cen...

[Ciara Cloud]

Nice! Love your blog post!

[CuriousDev]

Thanks for this! This surely can be useful.

[peerreynders]

Emmet snippets and expansion are built right into VS Code (but is supported in many different editors/IDEs) and provides many more HTML shortcuts: Cheat sheet

[Ciara Cloud]

Awesome! Thank you for sharing!!