[SublimeText]Emmetを使いこなすためのショートカットキー

Emmet には便利なショートカットキーがあるのでまとめておく。
Actions | Emmet Documentation

Expand Abbreviation

[SublimeText]Emmetで高速HTML/CSSコーディング HTML編 | DevAchieveで
説明した事ができる。詳しく書いているのでぜひ見てほしい。

Match Tag Pair

[SublimeText2]Bracket Highlighterで括弧を強調表示する | DevAchieveの括弧内全選択のHTML限定版。
キーひとつで範囲広げたりできるのでHTMLメインならEmmetの方が便利。

Sublime Text 2 では単語選択のショートカットとかぶっているのためか、ショートカットキーが異なる。

Ctrl + d: 選択範囲拡大

Ctrl + j: 選択範囲縮小

Go to Matching Pair

開始タグと終了タグを行き来できる。

Sublime Text 2 では開いているタブ一覧をパレットで開くショートカットキーと被るため、

Ctrl + Shift + t で開始タグと終了タグを行き来する。

Wrap with Abbreviation

後から要素を略語で囲める。自動でインデントを下げてくれて便利。

Sublime Text 2 では頭文字をとって Ctrl + w でコンソール？が開くので

記入していけば変換されていき、展開結果のプレビューが見れる。
エンターを押せば変換を確定する。

Wrapping individual lines

複数行選択すれば各行に対して囲みタグ展開できる。
ドキュメントでは複数行のテキストからリストタグを囲みタグ展開している。

Controlling output position

$# を使えばテキストを使いまわせるので凄く便利。

First
Second
Third
Forth

<ul>
    <li><a href="" title="First">First</a></li>
    <li><a href="" title="Second">Second</a></li>
    <li><a href="" title="Third">Third</a></li>
    <li><a href="" title="Forth">Forth</a></li>
</ul>

Go to Edit Point

前後の編集点を移動できる。
Sublime Text 2 でもショートカットは同じ。

Ctrl + Option + →: 次の編集点に移動

Ctrl + Option + ←: 前の編集点に移動

Select Item

アイテム(タグ、属性名="属性値"、属性値)を選択する。
Sublime Text 2 でもショートカットは同じ。

Command + Ctrl + .: 次のアイテムに移動

Command + Ctrl + ,: 前のアイテムに移動

CSSでも利用可能で、セレクタ、プロパティ: 値、値全体、複数ある場合は個別の値を移動できる。

Toggle Comment
コメントアウト/アンコメントできる。※コメントアウトの対義語はアンコメントらしい。

Command + /: コメントアウト/アンコメント切り替え

Split/Join Tag
XML の空要素タグを分割したり結合したりできるらしい。HTML では出番がない。
参考:
HTML5の空要素タグの文法 - 徒書
scriptタグは空要素っぽく閉じると，FirefoxやIEで読んでもらえない ::ハブろぐ

Remove Tag

親のタグを除去する。

Sublime Text 2 では Command + ' らしいのだが動かなかった。

仕方ないので自分で Ctrl + r に設定した。

Merge Lines

選択された複数行を1行にする。
Sublime Text 2 には何故か設定が入っていなかったので以下の設定をキーバインドに追加した。

{
    "keys": ["super+m"],
    "args": {"action": "merge_lines"},
    "command": "run_emmet_action"
}

Command + m を潰すことによって最小化を防ぐ狙いもあり。

Update Image Size
画像ファイル名の上で実行すると画像サイズを保管してくれる。
静的ページを制作する場合は最高に便利だろうなー。
ファイルパスに PHP のコードが入った場合は動かなそうだけど試してないからわからない。

Evaluate Math Expression

計算をしてくれる。通常の計算式の他に \ で 四捨五入( round(a/b) ) が行われる。
流石にカッコつき計算式とかは無理だったので単純な計算のみ。
HTML/CSS で行う計算は単純な四則演算のみなので問題ない。

Sublime Text 2 でも Command + Shift + y で計算できる。

Increment/Decrement Number

数値をインクリメント/デクリメントする。
キャレットが数値の上でないと反応しないので px とかの単位部分でも反応して欲しい気がする。
あと Sublime Text 2 では動かなかった。
微調整は Google Chrome developer tool でやるし、普通に打ったほうが速いからいらないかも。

Reflect CSS Value

CSS の値の変更を展開する。
ベンダープレフィックス系の値を Command + b で一括で変更できるので便利。

Encode/Decode Image to data:URL

画像を base64 エンコード/デコードする。

Sublime Text 2 では Ctrl + Shift + d でできるらしい。

Emmet 関連記事

[SublimeText]Emmetで高速HTML/CSSコーディング HTML編 | DevAchieve
Emmet v1.0がリリース！ナンバリング展開が逆順に対応！ | DevAchieve
[SublimeText]Emmetで高速HTML/CSSコーディング CSS編 | DevAchieve

[SublimeText]Emmetで高速HTML/CSSコーディング CSS編

CSSの展開

HTMLやXML、その他の構造化言語に適しているEmmetがCSSで何ができるかというと、
ショートハンド(速記)でスニペットや自動補完を助けてくれます。
それによってCSSでも爆速コーディングが実現可能です。
例えば、m と打って展開すれば margin: ; となるので後は 10px と打てばいいのです。
また、m10 と打って展開すれば margin: 10px; と展開されます。
複数の値を指定したい場合は m10-20 のように
ハイフン区切りで入力することで margin: 10px 20px; と展開出来ます。
マイナスのマージンを指定する場合は m-10 と打てば margin: -10px; と展開出来ます。
複数の値でマイナスを含む場合は m10--20 のようにすれば
ハイフンとマイナスを自動判定して margin: 10px -20px; のように展開してくれます。

単位補完

値から単位を補完してくれます。
整数ならpx(m10 → margin: 10px;)、
少数ならem(m1.5 → margin: 1.5em;)が補完されます。
単位にはそれぞれエイリアスがあり、p → %, e → em, x → ex, r → rem で変換されます。
m10p20e30e40r なら margin: 10% 20em 30ex 40rem; となります。
px以外は複数の値を区切るハイフンは不要です。つけてしまうとマイナスになってしまいます。

z-index, line-height, opacity, font-weight は単位が要らないプロパティなので
単位なしで展開されます。
設定で css.unitlessProperties を上書きすることで動作を変更することができます。
詳しくは preferences.json | Emmet Documentation を見てください。

色コード展開

シャープの後の16進数の文字の長さによって展開のされ方が変わります。
例

#1 → #111111
#e0 → #e0e0e0
#fc0 → #ffcc00

初期設定では自動短縮されるようになっているので #ffcc00 は #fc0 になってしまいます。
Sublime Text 2では設定で以下のように設定すれば自動短縮を無効に出来ます。

"preferences": {
    "css.color.short": false
}

詳しくは preferences.json | Emmet Documentation を見てください。

!important

!をつけることで !important を補完することができます。

m10! → margin: 10px !important;

その他にも大量の補完が存在し、全てを紹介することはできないので
各自で emmet-sublime/emmet/snippets.json at master · sergeche/emmet-sublime · GitHub を確認してください。
結構想像がつくようなものばかりなので暗記しなくてはいけないようなものではないです。
あるかな？ぐらいの気持ちで展開すると良い感じに展開してくれます。

ベンダープレフィックスの補完

CSSの新機能を使用する際には各ブラウザが独自の実装をしている場合、
それぞれベンダープレフィックスというものを付けなければいけません。
Emmet ではハイフンを付けて展開することで自動でベンダープレフィックスを補完してくれます。

-bdrs

-webkit-border-radius: |;
-moz-border-radius: |;
border-radius: |;

Sublime Text 2 だとパイプの位置にカーソルが合うので入力しやすいです。
もちろん -bdrs4 とすれば 4px まで補完されます。

ベンダープレフィックスの説明には border-radius がよく使われるけど
border-radius はもうベンダープレフィックスいらないのに何故でしょう…？

もっと詳しくは Vendor prefixes | Emmet Documentation から。

Gradients

長ったらしい background-image: linear-gradient をベンダープレフィックス付きで展開してくれます。

lg(left, blue, red)

background-image: -webkit-gradient(linear, 0 0, 100% 0, from(blue), to(red));
background-image: -webkit-linear-gradient(left, blue, red);
background-image: -moz-linear-gradient(left, blue, red);
background-image: -o-linear-gradient(left, blue, red);
background-image: linear-gradient(left, blue, red);

W3C の linear-gradient は to キーワードが必要です(でした？)。
CSS Image Values and Replaced Content Module Level 3
Gradients | Emmet Documentationによると W3C spec では to キーワードが要らなくなったみたいです。
(※ソースどこ？知ってる人教えて下さい。)

Emmet の lg() もそれに対応しています。が、それによってドキュメントのデモがバグってしまっています。
展開後のカラーを一つ変えて展開すると他のカラーも同様に変わるというデモだったのですが、
バグって動かないので Try it yourself で試してみてください。
そして Sublime Text 2 の Emmet でも動きません。
うん。linear-gradient めんどくさい。使うのやめよう。

Fuzzy search

良い感じに展開してやるからチートシート見とけ。(超訳)
by Fuzzy search | Emmet Documentation

さいごに

前回の記事：[SublimeText]Emmetで高速HTML/CSSコーディング HTML編

前回の記事からだいぶ期間が空いたけど面倒くさかったとかそういうことはない。
決してそんなわけではない。
あと、最後めんどくさくなったとかそんなこともない。
Gradients がバグってて萎えたとかそんなことはない。

次はたぶんActions | Emmet Documentation をまとめる。

Emmet v1.0がリリース！ナンバリング展開が逆順に対応！

まず、Emmetって何？って人は以下の記事を見てください。
[SublimeText]Emmetで高速HTML/CSSコーディング HTML編 | DevAchieve

リリース時のブログの記事はこちら → Emmet v1.0 is out
ベータ版からも細かく色々改善されているけど、
ナンバリング展開がかなり強化されていたので解説します。

ナンバリング展開

ul>li.item$*5>lorem3

<ul>
    <li class="item1">Lorem ipsum dolor.</li>
    <li class="item2">Saepe debitis itaque.</li>
    <li class="item3">Placeat amet veniam.</li>
    <li class="item4">Perferendis minima accusamus!</li>
    <li class="item5">Possimus velit iusto!</li>
</ul>

$マークが数値に展開されるというベータ版でもあった機能です。

逆順展開

ul>li.item$@-*5>lorem3

<ul>
    <li class="item5">Lorem ipsum dolor.</li>
    <li class="item4">Recusandae hic alias.</li>
    <li class="item3">Eos porro nobis!</li>
    <li class="item2">Nemo ratione distinctio!</li>
    <li class="item1">Pariatur quod exercitationem!</li>
</ul>

@修飾子を付加することによってナンバリングの始点が展開されます。
-修飾子でナンバリングを逆順に展開することができます。

逆順ナンバリング展開の終点指定

ul>li.item$@-3*5>lorem3

<ul>
    <li class="item7">Lorem ipsum dolor.</li>
    <li class="item6">Est accusantium corporis.</li>
    <li class="item5">Sed delectus illum.</li>
    <li class="item4">Repudiandae inventore itaque.</li>
    <li class="item3">Esse quos error.</li>
</ul>

-修飾子の後に数値を書くことでその数値が終点になるように逆順に展開してくれます。
つまり、上記の逆順展開は以下の省略形であることがわかります。

ul>li.item$@-1*5>lorem3

ナンバリング展開の始点指定

ul>li.item$@3*5>lorem3

<ul>
    <li class="item3">Lorem ipsum dolor.</li>
    <li class="item4">Quaerat doloremque dicta?</li>
    <li class="item5">Fugiat alias labore.</li>
    <li class="item6">Assumenda corporis quis.</li>
    <li class="item7">Illo perferendis totam.</li>
</ul>

逆順展開の終点が指定できるということは
通常のナンバリング展開でも始点を指定して展開できるのでは？と考えたあなたは鋭いです。
ちなみに数値を指定せずに以下のように書くと通常のナンバリング展開と同様に展開されます。

ul>li.item$@*5>lorem3

デフォルトで1が指定されたものと同じ動作をしますので
$@ で一つの修飾子として覚えてしまうのが良いかもしれません。

ドキュメントはこちら → Abbreviations Syntax #Item numbering: $ | Emmet Documentation

[SublimeText]Emmetで高速HTML/CSSコーディング HTML編

CSSセレクタのルールでHTMLを記述できるEmmetが凄い！

Sublime Text 2 を使い始めた理由の半分が
Emmet で高速 HTML/CSS コーディングしたかったからだ。
Emmet の凄さを見ればきっとあなたも使いたくなるだろう。
百聞は一見に如かずだ。
Emmet Documentationでその凄さを見てきてほしい。
Sublime Text 2 へのインストールは sergeche/emmet-sublime · GitHub から。
ここではHTML展開の基本をまとめたいと思う。

トリガー

タブまたはCtrl+Eで以下のような変換ができる。

HTMLの展開

要素名

タグ名を入力してトリガー発動するだけ。タグ名でなくてもタグっぽく展開する。

ネスト演算子

子: >

ul>li

<ul>
    <li></li>
</ul>

兄弟: +

div+div

<div></div>
<div></div>

親: ^

ul>li^div

<ul>
    <li></li>
</ul>
<div></div>

複数回も可能

div>ul>li^^div

<div>
    <ul>
        <li></li>
    </ul>
</div>
<div></div>

掛け算: *

ul>li*3

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

グループ: ()

table>(tr>(th+td))*3

<table>
    <tr>
        <th></th>
        <td></td>
    </tr>
    <tr>
        <th></th>
        <td></td>
    </tr>
    <tr>
        <th></th>
        <td></td>
    </tr>
</table>

属性演算子

id と class

ul#nav>li.item

<ul id="nav">
    <li class="item"></li>
</ul>

複数クラスを指定することも可能

div.btn-group>button.btn.btn-primary*2

<div class="btn-group">
    <button class="btn btn-primary"></button>
    <button class="btn btn-primary"></button>
</div>

カスタム属性

img[src alt="プロフィール画像"]

<img src="" alt="プロフィール画像">

ナンバリング

ul>li.item$*3

<ul>
    <li class="item1"></li>
    <li class="item2"></li>
    <li class="item3"></li>
</ul>

ゼロパディングも設定可能

ul>li.item$$*3

<ul>
    <li class="item01"></li>
    <li class="item02"></li>
    <li class="item03"></li>
</ul>

テキスト: {}

{詳しくは}+a{こちら}+{。}

詳しくは<a href="">こちら</a>。

テキストは親を変更しない。それによって意図しない結果が展開されることがある。

span{詳しくは}+a{こちら}+{。}

<span>詳しくは</span><a href="">こちら</a>。

span タグの中に a タグを書きたい場合は以下のように書く。

span>{詳しくは}+a{こちら}+{。}

<span>詳しくは<a href="">こちら</a>。</span>

暗黙的なタグ名

タグ名を入力せずに展開するとその場所によってタグ名が自動的に指定される。

ブロック要素内: div
インライン要素内: span
ul, ol 要素内: li
table, thead, tbody, tfoot 要素内: tr
tr 要素内: td
select, optgroup 要素内: option

ダミーテキスト: Lorem Ipsum

ダミーテキストとして “Lorem Ipsum” generator を使用することができる。

lorem または lipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime quam dolor vitae blanditiis totam a nemo. Aperiam necessitatibus numquam cum eligendi molestias corporis sunt facere molestiae autem omnis magnam earum.

単語数を決めて展開することもできる。

lorem10

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum voluptas.

上記の暗黙的なタグ名解決を利用することができる。

ul>lorem2.item*2

<ul>
    <li class="item">Lorem ipsum.</li>
    <li class="item">Dolores ratione.</li>
</ul>

次回

次回はCSS編を予定。HTMLも凄いけどCSSも凄い！使いこなして高速コーディングしたい。