“a plugin which enables you to add your own CSS snippet and generate HTML, XML quickly”
Basically, most text editors out there allow you to store and re-use commonly used code chunks, called“snippets”. While snippets are a good way to boost your productivity, all implementations have common pitfalls: you have to define the snippet first and you can’t extend them in runtime.
Emmet takes the snippets idea to a whole new level: you can type CSS-like expressions that can be dynamically parsed, and produce output depending on what you type in the abbreviation. Emmet is developed and optimised for web-developers whose workflow depends on HTML/XML and CSS, but can be used with programming languages too.
Some features and brief implementation detail is as follows:
HTML from CSS : Abbreviations
Abbreviations are the heart of the Emmet toolkit. The abbreviation’s syntax looks like CSS selectors with a few extensions specific to code generation. So every web-developer already knows how to use it.
Here’s an example: this abbreviation
…can be transformed into
<div id="page"> <div class="logo"></div> <ul id="navigation"> <li><a href="">Item 1</a></li> <li><a href="">Item 2</a></li> <li><a href="">Item 3</a></li> <li><a href="">Item 4</a></li> <li><a href="">Item 5</a></li> </ul> </div>
Abbreviations are optimized for, but not limited to, HTML and XML generation, and make writing tedious markup code a breeze. You can start learning syntax to unleash the full power of Emmet abbreviations …more
Emmet offers wide range of tweaks you can use to fine-tune your plugin experience. Almost all officially developed editor plugins (except PSPad and browser-based) has extensions support: a special folder where you can put
js files to extend Emmet. Please refer to README file bundled with your editor’s plugin to find out where Emmet looks for extensions.
.js file located in extensions folder will be loaded and executed on plugin start-up. Use
.json files you can fine-tune different parts of Emmet toolkit:
- snippets.json : Add your own or update existing snippets
- preferences.json : Change behavior of some Emmet filters and actions
- syntaxProfiles.json : Define how generated HTML/XML should look. …more
While Emmet abbreviations are good for generating HTML, XML or any other structured markup, it may look useless for CSS. You don’t want to write CSS selectors and transform them to CSS selectors, right? The only thing Emmet can do for you is to provide shorthands for CSS properties, but editors with native snippets and autocomplete can help you way better.
Actually, Emmet has something to offer.
For CSS syntax, Emmet has a lot of predefined snippets for properties. For example, you can expand
mabbreviation to get
margin: ; snippet. But you don’t want just
margin property, you want to specify a valuefor this property. So you have to manually type, let’s say,
Emmet can greatly optimize your workflow here: you can inject value directly into abbreviation.
margin: 10px; you can simply expand the
m10 abbreviation. Want multiple values? Use a hypen to separate them:
m10-20 expands to
margin: 10px 20px;. Negative values? No problem: precede the first value with hyphen and all the rest with double hyphens:
m-10--20 expands to
margin: -10px -20px; …more
A very powerful tool of the Emmet toolkit. It takes an abbreviation, expands it and places currently selected content in the last element of generated snippet. If there’s no selection, action will silently call “Match Tag Pair”to wrap context element.
Platform for new tools
Dig into Emmet source code and re-use its modules to create your very own and unique actions.
Reference : google.co.in, http://emmet.io/