We use the CodeMirror editor here on CodePen, and offer Emmet within that editor via the plugin. Well that plugin has gone 1.0 now (we’re on 1.1.3) with a bunch of improvements! Big thanks to Sergey Chikuyonok for working on this, letting us know about it, and working with us on little bug fixes and improvements before we got it live.
HTML Expansion Previews
Now you can see what your Emmet abbreviation will expand into before you expand it!
This also means that you can go back and edit the abbreviation and see the preview change, and tab to expand it from anywhere. In case you haven’t used Emmet on CodePen before, “expanding” abbreviations is done by pressing the tab key.
Works in the Vue Editor
The Vue Editor is special because the HTML, CSS, and JS are all combined into one editor, as Vue SFCs work. Now both HTML and CSS Emmet work within that single editor.
Works in JSX
If you have Babel turned on, JSX works in the JavaScript editor. Emmet works in there too!
Note that you have to start the HTML with an < to make it work, which is different than the HTML editor.
Cleaner UI for “Wrap with Abbreviation”
If you press Command (Mac)/Control (PC) + Shift + A with some selected code in the HTML editor, you’ll be able to “wrap” that in other HTML that you create from a new HTML abbreviation. That feels like a mouthful, but it’s super useful and I’d say I use this ability nearly every time I write HTML.
CSS Expansion Improvements
We aren’t displaying the Emmet snippet expansion in the CSS area, because we already display autocomplete there which we generally find more useful. But note that Emmet does do cool stuff in CSS. You can think of it like “fuzzy” expansion where abbreviations do their best to expand, like p10 expands into padding: 10px; and ai turns into align-items: start;.
But this version of Emmet is updated for more modern CSS, so for example, dg will now expand into display: grid; which I’ve personally been wanting for ages.
Your Custom Snippets Work Great
In your Editor Settings, you can set up custom Tab Triggers, which are literally just custom Emmet abbreviations. Here’s some of mine:
Keyboard Commands for Number Incrementing
This isn’t new to Emmet but it’s newly activated on CodePen for you to make use of! One use case is being able to nudge things around with simple keyboard commands much quicker than you could if you had to manually delete and re-type numbers.
There are six possibilities here:
Control + Up | Number + 1 |
Control + Down | Number – 1 |
Control + Alt + Up | Number + 10 |
Control + Alt + Down | Number – 10 |
Alt + Up | Number + 0.1 |
Alt + Down | Number – 0.1 |
Enjoy!
The post An Upgrade to Emmet appeared first on CodePen Blog.