A work-in-progress official plugin for Sublime Text 2 with upcoming Emmet toolkit, previously called Zen Coding. This plugin will eventually replace current one: https://github.com/sublimator/ZenCoding
Warning: this plugin may not work at all in some OSes (currently, it doesn’t work on Linux x32) since it written in JavaScript and uses PyV8 and Google V8 binaries to run. These binaries must be compiled individually for every OS.
You should remove or disable previous Zen Coding plugin, installed from Package Control, in order to operate properly.
- Clone git repo into your packages folder (in ST2, find Browse Packages... menu item to open this folder)
- Restart ST2 editor
Or with package control:
- Package Control: Add Repository
https://github.com/sergeche/emmet-sublime
- Package Control: Install Package
emmet-sublime
- Restart ST2 editor
Emmet is not announced yet, but you can get a quick look at new features and help me test and improve them.
Emmet features advanced CSS support:
- You can write numeric values (optionally with units) directly into abbreviation:
p10
→padding: 10px
,m0.5-10--15
→margin: 0.5em 10px -15px
,w100p
→width: 100%
. Integer and float values are automatically suffixed withpx
andem
units respectively. - Abbreviations prefixed with dash will automatically produce vendor-prefixed CSS properties. For example:
bdrs
will produceborder-radius
property, but-bdrs
will produce a list of properties withwebkit
,moz
,ms
ando
prefixes. - Gradient generator: write gradient definition (
linear-gradient(...)
or simplylg(...)
) as a value for any CSS property and run “Expand Abbreviation” action (or simply hit Tab key) to get a vendor-prefixed list gradient definitions. - Unknown abbreviations are no longer expanded to HTML tags (e.g.
foo
→<foo></foo>
), they are expanded into CSS properties:foo
→foo: ;
.
You can see more examples in unit tests:
If you’re writing your HTML and CSS code in OOCSS-style, Yandex’s BEM style specifically, you will like this filter. It provides some aliases and automatic insertions of common block and element names in classes. For example: .block_mod>.-elem|bem
is the same abbreviation as .block.block_mod>.block__elem
. More examples in unit tests.
If you’re writing a lot of BEM code, you may want to make bem
filter default for html
syntax (see Emmet.sublime-settings
).
- Better Tab key handling.
- Many aspects of Emmet core can be configured in
Emmet.sublime-settings
file: create a copy of this file into ST2’ Users folder and put there you snippets, preferences, output profiles etc. - “Lorem ipsum” generator: just expand
lorem
orlipsum
abbreviation (optionally with number suffix, indicating word count:lorem10
) to generate random sentences. More examples in unit tests. - Implicit tag names: you don’t need to write tag names for most common structures, Emmet will resolve them for you depending on parent’s tag name. Check out these abbreviations:
.test
,em>.test
,ul>.item*3
,table>.row$*2>.cell$*3
. - New operator to climb one level up:
^
. Check out these abbreviations:.header>.nav^.logo
,.header>.wrap>.nav^^.logo
. - Extensions support: you can easily extend Emmet with new actions and filters or customize existing ones. In
Emmet.sublime-settings
, defineextensions_path
setting and Emmet will load all.js
and.json
files in specified folder at startup.
By default, Emmet overrides Tab key behaviour and expands its own abbreviations instead native snippets. You can either disable this feature in user preferences (add "disable_tab_abbreviations": true
setting into your Settings — User file) and use Ctrl+E
or Ctrl+Alt+Enter
to expand Emmet abbeviations or move your snippets to Emmet as described here. I’m investigating possibility to expand native snippets via Emmet Tab key handler.