Top 8 Emmet Tips You Might Not Know

2018-06-13 03:01 AM

74

Top 8 Emmet Tips You Might Not Know. Emmet (who remembers when it was called Zen Coding?) is a very useful code editor tool that brings snippets and supercharged shortcuts for generating HTML/markup and even CSS.

Save tons of time in your daily workflow by learning more of Emmet syntax. Also remember that all of these examples will be in plain HTML files, but you can also configure Emmet to be used with React/JSX, Angular templates, Vue templates, and more.

To give you a quick example of Emmet's main use, expanding an abbreviation into full HTML.

Climbing Up

One neat trick Emmet can do is climb back up the tree with ^ if you find yourself nested too far down. I've found that using grouping more means I don't have to climb up the tree. It is useful in some scenarios so it's good to know.

Tag Balancing

This is also one I found recently that is brilliant. Ever look at an opening HTML tag and wonder where it's closing tag is? Ever wanted to select everything inside of the opening/closing tags? Tag balancing to the rescue!

Place your cursor inside the tags you want to find

Open the command palette with ctrl/cmd + shift + p

Select Emmet: Balance (Outward)

Do this multiple times to keep expanding outwards

CSS

In addition to markup files, Emmet can be used in CSS. Very useful to expand some things that require a lot of typing. I'll show off a few of my often used ones:

pos: position: relative;

d: display: block;

m: margin: ;

mt: margin-top: ;

mb: margin-bottom: ;

pw: padding-top: ;

pb: padding-bottom: ;

bg: background: #000;

!: !important

@m: @media screen {}

c: color: #000;

op: opacity: ;

Conclusion

Hopefully you've gained a few more Emmet skills to add to your toolset. I'm a big believer of putting in the time to learn the tools we have so that we can be more efficient developers.

Let me know if you liked this post and we'll do more tips and tricks for ways to improve your workflow.