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

326件のシェア(そこそこ話題の記事)

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

はじめに

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

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

アジェンダ

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

便利な機能:Html編

基本動作一覧

項目名 説明 Winコマンド Macコマンド
Expand Abbreviation コード展開 Ctrl+E or Tab Cmd+E or Tab
Next Edit Point 次の編集ポイントへ移動 Ctrl+Alt+ Ctrl+Alt+
Previous Edit Point 前の編集ポイントへ移動 Ctrl+Alt + Ctrl+Alt+
Match Pair カーソル位置から親要素を辿る Ctrl + , Cmd+D
Select Next Item 次のDomへ移動 Ctrl+Shift+. Cmd+Shift+.
Select Previous Item 前のDomへ移動 Ctrl+Shift+, Cmd+Shift+,
Toggle Comment カーソルの位置の要素をコメントアウト Ctrl+Shift+/ Cmd+/

ダミーテキストの挿入

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

1.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を書いているため、上記指定の設定をしていると便利です。

2.パッケージ内の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コマンド デモ
Expand Abbreviation Emmetの展開コマンド Ctrl+E or Tab Cmd+E or Tab デモ
Match Tag Pair カーソルのある位置から、囲われているタグの階層を上る。 Ctrl+, Ctrl+D デモ
Go to Matching Pair カーソルのあるタグの開始タグ、終了タグに移動 Ctrl+Alt+J Ctrl+Shift+T デモ
Wrap with Abbreviation 選択、又はカーソルのある要素に対して、任意のタグで囲む。 Ctrl+Shift+G Ctrl+W デモ
Go to Edit Point タグ間の編集ポイントへカーソルを移動 Ctrl+Alt+(進む)
Ctrl+Alt+(戻る)
Ctrl+Alt+(進む)
Ctrl+Alt+(戻る)
デモ
Select Item タグの各項目(タグ名、属性など)へ移動する Shift + Ctrl + .(進む)
Shift + Ctrl + ,(戻る)
Shift + Cmd + .(進む)
Shift + Cmd + ,(戻る)
デモ
Toggle Comment コメントの挿入・取り消し Shift + Ctrl + / Shift + Cmd + / デモ
Split/Join Tag タグの分割と結合 Shift + Ctrl + ' Shift + Cmd + ' デモ
Remove Tag カーソルがのっているタグの開始タグと終了タグを削除 Shift+Ctrl+; Cmd + ' デモ
Merge Lines タグ内のテキストをマージ
Sublime Text 2のパッケージ内にキー設定がないため、キーバインドに以下を設定
{ "keys": ["ここは好きなショートカットを設定"], "args": {"action": "merge_lines"}, "command": "run_emmet_action" }
Shift + Ctrl + M Shift + Ctrl + M デモ
Update Image Size 指定画像の高さ・幅を自動反映
*画像へのパスが通っている必要あり
Ctrl + U Shift + Ctrl + I デモ
Evaluate Math Expression 数値の計算 Shift + Ctrl + Y Shift + Cmd + Y デモ
Increment/Decrement Number 値の増減 Ctrl + (1増加)
Ctrl + (1減少)
Shift + Alt+(10増加)
Shift + Alt+(10減少)
Alt+(0.増加)
Alt+(0.1減少)

Ctrl + (1増加)
Ctrl + (1減少)
Cmd + Alt+(10増加)
Cmd + Alt+(10減少)
Alt+(0.増加)
Alt+(0.1減少)
デモ
Reflect CSS Value 類似するプロパティの値を一括指定 Shift + Ctrl + R Shift + Cmd + R デモ
Encode/Decode Image to data:URL 画像をBase64にデコード Ctrl + ' Shift + Ctrl + D デモ

Emmetチートシート

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

参考URL

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