Make your coding ultrafast by simplifying how you write HTML and CSS
So your HTML and CSS coding speed has now been boosted (and that will really increase your development efficiency) but Emmet doesn’t stop there. Another aspect of web development that can be time-consuming is editing your code.
Emmet has a treasure trove of actions that every developer has ever wished. We have already covered the main action ‘Expand Abbreviation’ on page 39, which is triggered by pressing Tab or in some editors Ctrl+E, but there are many other great features to enhance your code editing experience. Note that any key mappings outlined in this article are the defaults set within Emmet source code, these may differ across code editors.
Match Tag Pair
This can be run outwards (Ctrl+D) or inwards (Shift+Ctrl+D) and will select the matching tag pair within HTML in the relevant direction. This is really useful when you are working with large sections of nested HTML tags or are unfortunate enough to be working with some poorly formatted HTML (we’ve all been there!).
Go to Matching Tag Pair
Very similar to the Match Tag Pair action, this will jump between opening and closing tags of a HTML element using Ctrl+T.
Wrap with Abbreviation
One of the best tools that Emmet offers, this will wrap your selected HTML with the result of an abbreviation, simply place the caret within your HTML or select a section and then press Shift+Ctrl+A. You will be prompted to enter an abbreviation and the expanded version of this will then wrap your selection.
Go to Edit Point/Select Item
These two actions are very similar and allow you to traverse between fundamental points within your code. This will then let you quickly edit multiple elements without even touching the mouse.
This simply wraps and unwraps a selected section of HTML with comment tags by pressing Ctrl+/.
Split or join tags
Tags can be split or joined by using and changing it into or vice versa with Ctrl+J.
When restructuring HTML, it is inevitable that you will be removing tags that contain that markup that you want to keep. To avoid having to remove the opening and closing tags separately, you can place the caret on a tag and press Ctrl+K.
Emmet is quite clever in that if you select lines, it will merge them for you and change them into one complete line. However, if nothing has been selected, then it will in turn match the HTML tag that is closest to it. All you have to do for this to happen is press Ctrl+Shift+M in the keybindings.
Update Image Size
When defining images within your HTML, once you have set the src attribute you can set the correct width and height attributes by pressing Shift+Ctrl+U. No need to remember those image dimensions any more.
There are two excellent features of Emmet when defining numerical values, predominantly in CSS. The Evaluate Math Expression will expand an expression to its result by pressing Shift+Ctrl+Y. For example ‘2*3+3’ will expand to ‘9 when this action is used’.
Another great numerical tool is incrementing values, commonly used in browser dev tools, Emmet allows you to increment up and down by integer or decimal using Ctrl+Up/Down and Alt+Up/Down respectively.
Reflect CSS value
This value will be under the caret and then copied to all vendor-prefixed variants. You won’t have to manually input values anymore, all you need to do is change one and then press Ctrl+B to have it automatically applied to other prefixed variants for you.
If you are looking to reduce HTTP requests within your code, you may have used image base64 encoding tools. Emmet already has this functionality built in. Place the caret within the image url path and press Shift+Ctrl+I. Your image path is switched to an encoded string with no need for online tools.