【便利ツール】Emmetで、ちょっと気持ちいいコーディング with sublime text 2・下巻

はじめに

前回に引き続き、「Emmet」についてご紹介していきたいと思います。

Emmet Documentationというドキュメントサイトがあるのですが、そちらに「Emmet」の情報が網羅されています。
Emmet Documentationサイトから、ピックアップしてお伝えしようと思います。

アジェンダ

1. 便利な機能：Html編
2. 便利な機能：CSS編
3. カスタマイズしてみる
4. おまけ

便利な機能:Html編

基本動作一覧

ダミーテキストの挿入

loremを記載して、展開するとダミーのテキストを挿入してくれます。

//展開前
p*3>lorem

//展開後
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus consectetur nisi modi alias aspernatur suscipit nihil laborum vero possimus. Nobis velit iste eveniet atque aspernatur! Repellendus illum nulla similique quia.</p>
<p>Magni sapiente dolorum dolorem expedita natus eaque aut nesciunt modi libero aspernatur omnis ex ullam eum? Sunt iste molestiae consequatur quasi non amet laboriosam magni ex a est error quae.</p>
<p>Illo deserunt repellat quibusdam nobis vero ratione dolore sit expedita ea est atque eum quos itaque unde magnam nam enim consectetur laboriosam ut recusandae eos eaque asperiores iure consequuntur soluta.</p>

階層を上がっての展開

ショートカットに^を含めることにより、階層を上ることができます。

//展開前
div+div>h1>span^p

//展開後
<div></div>
<div>
    <h1><span></span></h1>
    <p></p>
</div>

上記、展開前の解説しますと、h1>spanでh1タグの中に、spanタグを入れる指定となっています。 現状はh1タグの中まで指定しています、その後^を指定することで、h1と同じ階層に上ることができます。

グループ化の展開

//展開前
div>(header>ul>li*2>a)+footer>p

//展開後
<div>
    <header>
        <ul>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
        </ul>
    </header>
    <footer>
        <p></p>
    </footer>
</div>

タグ属性の展開

最近data属性の便利さに感動しているのですが、data属性や、rowspan属性などの属性の展開する方法です。

//展開前
div[data-foo]
td[rowspan=2 colspan=3 title]

//展開後
<div data-foo=""></div>
<td rowspan="2" colspan="3"></td>

画像の高さと幅を更新（Update Image Size）

Winコマンド：Ctrl+U

Macショートカット：Shift + Ctrl + I

//展開前(カーソルをimgタグ内にいる状態で上記ショートカット)
<img src="demo.jpg" alt="" />

//展開後(画像の高さと幅を入れてくれる。)
<img src="demo.jpg" alt="" width="200" height="150" />

上記ですが、画像のパスが正しく通っていないと動作してくれない模様

便利な機能:CSS編

値の展開

/*展開前*/
w100
w100p
w100e
w100x

width: 100px;
width: 100%;
width: 100em;
width: 100ex;

色のプロパティ展開

/*展開前*/
c#1
c#e0
c#fc0

color: #111;
color: #e0e0e0;
color: #fc0;

特殊なプロパティ展開

/*展開前*/
!
@i
@m
bg:ie

/*展開後*/
!important
@import url();
@media print {}
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='x.png',sizingMethod='crop');

pngのデコード展開

これは驚いた機能のひとつなんですが、png画像をBase64に変換してくれます。

Winショートカット：Ctrl + '

Macショートカット：Shift + Ctrl + D

/*展開前*/
background: url(img/test.png) ;

/*展開後*/
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAIAAACRXR/mAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpFM0UxNjA3OTYyNDUxMUUyQjVCMkE4QUIxOEZFMjdEOCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpFM0UxNjA3QTYyNDUxMUUyQjVCMkE4QUIxOEZFMjdEOCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkUzRTE2MDc3NjI0NTExRTJCNUIyQThBQjE4RkUyN0Q4IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkUzRTE2MDc4NjI0NTExRTJCNUIyQThBQjE4RkUyN0Q4Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+HLD4qwAAADxJREFUeNrszgENAAAIAyDfP/StoRskIG3nnmhpaWlpaWlpaWlpaWlpaWlpaWlpaWlpaWlpaWn9aq0AAwC9V5WdfMvHHgAAAABJRU5ErkJggg==);

ちょっとカスタマイズ

Emmetの魅力のひとつとして、ショートカットの展開があげられますが、これを自分なりにカスタマイズ（スニペット登録）したいと思ってくると思います。 この指定方法を二つご紹介します。

１．Sublime内で編集

まずSublimeのメニューから「Preferences > Package Settings > Emmet > Settings User」で、指定が可能です。

{
    "snippets": {
         "html": {
              "abbreviations": {
                  "ここにhtml用のショートキー": "ここに展開後のソース"
              }
            },
          "css": {
              "snippets": {
                  "ここにcss用のショートキー": "ここに展開後のソース"
              }
          }
    }
}

例えば、以下のように記載したとします。

{
    "snippets": {
         "html": {
              "abbreviations": {
                  "foo": "<div class='foo'>"
              }
            },
          "css": {
              "snippets": {
                  "@mi": "@mixin | {}",
                  "@in": "@include | ;",
                  "@im": "@import '|' ;"
              }
          }
    }
}

htmlの展開

/*展開前*/
foo
/*展開後*/
<div class='foo'></div>

cssの展開

/*展開前*/
@mi
@in
@im

/*展開後*/
@mixin  {}
@include  ;
@import '' ;

最近の開発では、Sass(SCSS)にてCSSを書いているため、上記指定の設定をしていると便利です。

２．パッケージ内のsnippets.jsonを編集

上記のSublime内での編集ですと、チーム内で設定の共有等ができないため、
以下ファイルを修正し、チーム内でのスニペットの共有が可能です。

Winのsnippets.json格納先

/ユーザー/AppData/Roaming/Sublime Text 2/Packages/Emmet/emmet/snippets.json

Macのsnippets.json格納先

/Library/Application Support/Sublime Text 2/Packages/Emmet/emmet/snippets.json

おまけ

Emmetのアクション一覧

Sublime Text2 でのショートカット一覧になります。カスタマイズされたキーバインドと衝突してしまう可能性もあるため以下から、確認して必要な際はキーバインドの修正をしてください。

• Win用のキー配列
• Mac用のキー配列

Emmetチートシート

Emmetでどうやるんだろう？ってことが多々あり、チートシートなんかないかなと思っていたらありました！
Emmetのチートシートはこちらからどうぞ！
Cheat Sheet

参考URL

以下サイト様を参考にさせていただきました。

• Sublime Text2 Emmet でのスニペット(snippets.json)利用のススメ
• sergeche / emmet-sublime
• Emmet Documentation