What is emmet?
Emmet is a collection of abbreviations that expand into html/xml/css, taking the idea of text snippets further.
When working with Emmet, type in the appropriate abbreviation and hit the action key. In Sublime Text 2/3 this is the
Emmet (previously known as Zen Coding) is a web-developer’s toolkit that can greatly improve your HTML & CSS workflow.
There are some really cool features in emmet that we don’t use frequently. I want to share some rarely used but very useful emmet features. Lets get started.
It merges selected lines into a single one. But when there’s no selection, Emmet will match context HTML tag.
Unfortunately there is no key board shot cut enable by default in the emmet sublime text plugin. So, Lets create on our own. Open up the Preferences → Package settings → Emmet → Key Bindings - User and put the following code in that file and save it.
Now you can use the short cut
m to merge multiple lines in between a tag.
Update image size
Its always a good practice to mention the height and width of the image in the
img tag, However 90% of web developers ignore specifying the height and width attributes. For those this snippet is very useful.
This action helps you to automate this process: simply place caret inside tag and run this action to add/update width and height attributes.
In CSS, place caret inside property value with url() function to add/update width and height properties for current rule.
You just need to press
Note that this action also works for absolute URLs: it will start searching for requested file from host file’s folder and then will traverse up the tree.
Evaluate Math Expression
How much time you have spend adding up pixes, subtracting padding in the calculator application! Now you can evaluate math expression with in the code editor.
Evaluates simple math expression like 13*7 or 14/5 and outputs its result. You can use \ operator which is equivalent to
This is very useful in CSS where numeric values should be modified frequently.
This action, as name says, increments or decrements number under caret with different steps: 0.1, 1 or 10.
Shortcuts in sublime text 3 for increment
Up— increments by 1 point
Up— increments by 0.1 point
UP— increments by 10 point
Shortcuts in sublime text 3 for decrements
Up— decrements by 1 point
Up— decrements by 0.1 point
UP— decrements by 10 point
To conclude emmet is awesome start using it now!