Tired of typing in<div> only 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.
5. Quick siblings
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 typeimg+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.
4. Nested elements
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>3. Multiple elements
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>2. fast ids
If you want to put some divs in with ids already attached, you can use css-style syntax.#article becomes<div></div>. But you can combine other techniques with this, for instancediv>#hello>p becomes
<div> <div> <p></p> </div> </div>1. Divs, but with class!
If you paid attention during the last tip you'll probably already understand how to use classes. Just add a dot..bold becomes<div></div>. You can also chain them together to add more (.bold.bigtitle.nav-bar-header) or combine any previous methods to get these going. Trydiv>#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!
Top comments(4)
For further actions, you may consider blocking this person and/orreporting abuse
