Emmetの次期バージョンv1.1(Beta)の新機能がスゴい

- by konitter

Emmetといえば、HTMLやCSSが爆速で書けるようになるWeb制作者なら誰もが知っているであろうアレですが、現在次期バージョンとしてv1.1の開発が進められています。そのことは、昨年の12月23日にEmmet公式ブログで発表されたものの、あまり話題になっていないようなのでここで簡単にご紹介します。

インストール方法

v1.1(Beta)は現状Sublime Textでのみ試すことができます。なお、現時点ではまだ正式なリリース版ではありませんので、ご利用はあくまでも自己責任でお願いします。

  1. すでにEmmetを入れているなら別の場所にバックアップを取ったうえでPackage ControlからEmmetを削除。
  2. 一旦Sublime Textを終了しておく。
  3. ターミナルからSublime TextのPackagesフォルダに移動してプラグインのレポジトリgit cloneし、v1.1のブランチにgit checkout v1.1で切り替える。そういうのが難しい人はここからダウンロードして解凍したものを置く。
  4. Sublime Textを起動。

v1.1の新機能(11個)

1. Can I Useデータベースのサポート

ベンダープレフィックスが必要なCSSのプロパティおよびその値の展開には、CSSやHTML5などの各ブラウザ対応状況が確認できるWebサービス「Can I Use」のデータベースを用いて行われます。
デフォルトでは全ブラウザの2つ前までを範囲としますが、caniuse.eracaniuse.vendorsの設定で微調整することができるようです。くわしくはこのモジュールヘッダーを参照。

2. LESSとSCSSのフルサポート

Toggle CommentUpdate Image SizeSelect ItemなどのアクションがLESSとSCSS(SASSは除く)のファイルで動くようになります。

3. SlimとJadeの構文をサポート

EmmetのFiltersの機能がアップデートされ、HTMLをSlimおよびJadeの構文で展開できるようになります。

p.title>a[/hoge/]|slim
↓
p.title
  a href="/hoge/"

4. CSS Gradientジェネレータのアップデート

W3C構文の仕様やCan I Useデータベースなど複数の定義をサポートします。

lg(red, black)
↓
background-image: -webkit-linear-gradient(red, black);
background-image: -o-linear-gradient(red, black);
background-image: linear-gradient(red, black);

5. Boolean型属性

属性名の後ろにドットを書くことで、同じ名前と値を持つ属性を短く書けるようになります。

inp[type=radio][checked.]
↓
<input type="radio" name="" id="" checked>

6. 暗黙の属性値

img要素のsrc属性などHTML要素において値が必須な属性は、その属性名を省略できるようになります。

img[src=image.png]
↓
img[image.png]

7. デフォルトの属性

属性が必須でない要素も暗黙の属性値によって値を展開できるようになります。

script → <script></script>
↓
script[jquery.js] → <script src="jquery.js"></script>

8. 新アクション「Update Tag」

新たに追加されるアクション「Update Tag」を使うことで、すでに記述(展開)済みのHTML要素をEmmetの機能で更新できるようになります。更新したい要素にカーソルを置き以下のコマンドを叩くと、「Enter Abbreviation:」というダイアログがエディタのウィンドウ下に開くので、追加したい属性や値を書いてEnterします。

<header>|</header>
↓
[shift]+[ctrl]+[u] → .global → Enter
↓
<header class="global"></header>

9. アクション名「Match Tag Pair」を「Balance」に変更

v1でも実装されているMatch Tag Pairのアクション名が「Balance」に変更され、またCSSでもそのアクションが動くようになります。

10. CSSをシングルラインで展開できるオプションを追加

syntaxProfiles.json(Sublime TextならEmmet.sublime-settings)にて"css": "css_line"を設定するとCSSのプロパティがシングルラインで展開されるようになります。くわしくはこちらのドキュメントを参照。

11. RGBaカラーのシンタックスを追加

colorプロパティなどでのカラーコードの展開において、後ろに.Nを付けることで、CSS3のRGBaで開きます。

c#dca.7
↓
color: rgba(221, 204, 170, 0.7);

まとめ

公式ブログの該当エントリーには他にも、EmmetはそもそもNode.JSに準拠した書き方がされているので、npm packageとして提供される日も近いとのことです。実際、Emmetの開発版と思われるブランチがGruntでビルドできるようになっています。

具体的なリリース日は未定ですが、その動向には注視していきたいです。