ページ

2013/03/09

[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