Windows + SublimeText + 日本語キーボードでのEmmetキーバインド

HTMLやCSSを高速で書けるEmmetをここ↓で勉強した。

基本的な記法はわかったんだけど、お手本動画はMacで、自分が使っているWindowsとはキーバインドが違う。
さらにSublimeText + Emmetプラグイン環境だと、公式ドキュメントに書いてあるキーバインドとも違う部分がある。SublimeText自体のキーバインドとの衝突と避けるためのようだ。

まあググれば Windows + SublimeText でのキーバインドを一覧にしたサイトなんていっぱいあるよね、とタカをくくっていたら意外となかった。 ほとんどのサイトがMac環境のことしか書いてない……。

Windows環境でのキーバインドを紹介してくれている数少ないサイトさん(ありがたや)を見たり、プラグインのキーマップを直接読んでみたけど、やっぱり一部のアクションが動かない。
どうも、日本語キーボードだと一部のキーの位置がずれるのが原因みたいだ。 たとえば英語キーボードの ' は日本語キーボードでは ^ になり、;: になる。

というわけで需要はあまりないと思われるが、

  • SublimeText
  • Windows
  • 日本語キーボード

でEmmetしたい人のためのキーバインド一覧を作った。ほとんど自分用かな……。

Actions Description Key
Expand Abbreviation Emmetの展開コマンド Ctrl + E
or
Tab
Interactive “Expand Abbreviation” 入力ウインドウからのEmmetの展開 Ctrl + Alt + Enter
Match Tag Pair タグで囲われている部分を選択 Ctrl + , (階層を登る)
Ctrl + Shift + 0 (階層を下る)
Go to Matching Pair 開始タグ、終了タグに移動 Ctrl + Alt + J
Wrap with Abbreviation 選択部分、またはカーソルのある要素をタグで囲む Ctrl + Shift + G
Go to Edit Point タグ間、未入力の属性などの編集ポイントへカーソルを移動 Ctrl + Alt +
Ctrl + Alt +
Select Item タグの各項目(タグ名、属性など)を選択 Ctrl + Shift + .
Ctrl + Shift + ,
Toggle Comment コメントの挿入/取り消し Ctrl + Shift + /
Split/Join Tag タグの分割と結合 Ctrl + Shift + `
Rename Tag タグのリネーム Ctrl + Shift + ^
Remove Tag 要素の開始・終了タグを削除 Ctrl + Shift + :
Merge Lines タグ内の複数行テキストを一行に Ctrl + Shift + M
Update Image Size 画像の高さ・幅を自動入力 Ctrl + U
Evaluate Math Expression 数値の計算 Ctrl + Shift + Y
Reflect CSS Value 類似するCSSプロパティの値を一括指定 Ctrl + Shift + R
Encode/Decode Image to data:URL 画像をBase64にエンコード Ctrl + ^
Increment/Decrement Number 数値を1ずつ増減 Ctrl +
Ctrl +
数値を10ずつ増減 Shift + Alt +
Shift + Alt +
数値を0.1ずつ増減 Alt +
Alt +

emmet-sublimeは、初期状態では「Merge Lines」のキーバインドが設定されていない。必要な場合は各自でユーザーファイルに設定を書き込む必要がある。