Tired of typing inonly to be forced to scroll back and type in the class elements? Exhausted by nesting div into div to make your beautiful grid layout in what was supposed to be a flash, but turned into leaning on your left arrow key until your hand went numb? If you said yes to any of that, you need to meet my buddy Emmet. Emmet helps devs by allowing you to type in snippets within VSCode, and have beautiful HTML come out the other end.
Good ol' addition symbols (+) will get you sibling elements. Lets say you have a div with an image, h3, and paragraph. With your cursor in the body of the div, just type
img+h3+p and emmet will give you the beautiful html :
<div> <img src="" alt=""> <h3></h3> <p></p> </div>
And your cursor will be ready to insert the src for your image.
What if you need nested elements? Just change out the + for a >!
body>main>div>h1 will give you
<body> <main> <div> <h1></h1> </div> </main> </body>
Making a table can be time consuming, unless you're using emmet to its full potential. Using the same technique, parentheses will let you multiply the number of nested children.
div>(p*5) turns into:
<div> <p></p> <p></p> <p></p> <p></p> <p></p> </div>
If you want to put some divs in with ids already attached, you can use css-style syntax.
<div id="article"></div>. But you can combine other techniques with this, for instance
<div> <div id="hello"> <p></p> </div> </div>
If you paid attention during the last tip you'll probably already understand how to use classes. Just add a dot.
<div class="bold"></div>. You can also chain them together to add more (.bold.bigtitle.nav-bar-header) or combine any previous methods to get these going. Try
div>#art1.article>#art2.article>#art3.article and you'll see how many things we've just covered can be combined.
Let me know what your favorite shortcuts are!