Note/InfoConsider this article as Emmet cheat sheet which will work in the same way on any code editors like Brackets, Sublime Text, Visual Studio Code, Atom, etc.
Brackets Emmet
Emmet is one of the best plugin for code editors like Brackets, Sublime Text, Atom, Eclipse, Code, Notepad++,Dreamweaver, etc. This plugin helps in generating expanded tags with the help of abbreviations.
This Emmet for Brackets tutorial will work on any code editors with the same set of abbreviations.
Let’s understand the type of abbreviations and how we can use these abbreviations to generate the structure of tags in Brackets using Emmet.
Most of the time, you need to write a particular abbreviation followed by a Tab Key in the keyboard.
1. To create skeleton of HTML
To create a skeleton of HTML, type exclamation mark(!) and click the 'Tab' key
Note/InfoYou should place your cursor just after the lorem(i.e. just before the } & it will generate a random Lorem Ipsum texts.
Once done, you need to place your cursor at end & press the Tab key so that you get the complete expanded tag.
Bonus Tips In few Scenarios, pressing the Tab key does not expand abbreviations.
In that case, try CTRL + E. If this does not work as well, then map your computer’s keyword properly and see if the Emmet is using the Tab key or not.
Optionally, you can check the preferences file of the code editor.
In Brackets code editor, navigate to – Debug -> Open Preferences File
If none of the debug skills work, then the last option is to change your text editor. If you are working on Brackets, you can try switching to Sublime Text, Atom or Visual studio code.
Other Brackets Emmet shortcuts
All the options for Emmet brackets can be found under the “Emmet” as shown below.
The options and shortcuts with arrow pointing towards them are important.