In this post I want to help developers save time by offloading some tasks to the background process of their brain. like before in VSCode

Emmets

Emmet abbreviation and snippet expansions are enabled by default in html, haml, jade, slim, jsx, xml, xsl, css, scss, sass, less and stylus files. As well as any language that inherits from any of the above like php.

Those things are magical; I just save so much time since I learned how they work, the idea is that you write a string then hit TAB, and VSCode will auto generate the code for you, let’s look at some examples, shall we?



basic example: creating a div tag, not very impressive 😪

Emmet abbreviations are aware of their context, if I only specify a class or an id, it’ll create a div for me

creating a div from class and id specification

I can also use that context when creating lists

creating a list with items with emmets 🔥

One that impresses people often is generating HTML boilerplate by typing ‘!’ then TAB.

One of the more low-key but super useful emmet abbreviations is balance (select outwards) which basically selects the borders of one scope upper of where your cursor is, to integrate it more smoothly in my workflow, I added it to a key binding like so:

balance (inward) is also available, but I never use it 😅

Now, selecting the outer scope is super simple, and I don’t have to use my mouse or take 3 days to highlight the piece of code I want

Finally, you can create your own custom emmet in a json file and set it in the settings of VSCode.

Hope you found this helpful, you can follow me on @sealshaal for more tips

.