Sublime TextのEmmetでキーバインドを設定する方法
kazuki
Sublime TextのEmmetでキーバインドを設定する方法
こんにちはkazukiです。
先日、いつものようにSublime Textで作業していると
「あれ!? ctrl+eで展開できない!?」
「色々変わってない!?」
ってことになりました。
なぜだ。。。tabで展開はできるけどもう私のカラダはctrl+eで展開のカラダなのに。。。
文字の間にbrタグとか入れて無理やり展開できないじゃないか。。。どっどどどどうしよう！
焦りながら中身を見てみると、ずっと前に設定していたキーバインド（Key Bindings）が消えている。。。
というかpackageのEmmetフォルダがごっそり消えてる。。。
同士はいないかツイッターやらなんやら調べてみると、Emmetのバージョンアップで仕様が変わったとのこと。
そしてキーバインドを追加すれば解決するとのこと！
「なんだーなら簡単じゃーん！設定したのは結構前だけど大丈夫でしょー！」と思ったのですが、ここから長かったです。。。
そんなこんなでつまづきながらも解決できたので備忘録として残しておこうと思います。
なお、私はMacを使っているのでMac環境で説明します。
以前の記述方法では動いてくれません
いろいろ調べてみたところ、なくなったものを追加すれば戻るとのことだったので、以前追加したものをそのまま追加してみました。
しかしうまくいきませんでした。
これが今回ずっとつまずいた原因です。
私は過去に囚われていたのです！
解決方法
合間にちょこちょこやっていたので、おそらく時間でいうと半日くらいかかってしましましたが、解決できました。
その方法は、公式サイト（github）からパッケージをダウンロードして、その中にあるDefault (OSX).sublime-keymapの中から必要なコードを追記すれはいいのです。
Emmet（github）にアクセスしデータをダウンロード
Emmet（github）
emmetio/sublime-text-plugin
こちらにアクセスし、Codeボタンからデータをダウンロードします。
Default (OSX).sublime-keymapを開く
ダウンロードしたデータを解凍するとこんな感じでいろいろ入ってます。
その中からDefault (OSX).sublime-keymapを選び開きます。
開くと以下のコードが記述されています。
[
// This is a sample keymap for all available Emmet actions like
// Increment/Decrement number, Balance, Select Item etc.
// Copy and uncomment actions you want to use into your keybindings file on the right.
// Read more about Sublime Text key binding: https://www.sublimetext.com/docs/3/key_bindings.html
// Expand abbreviation anywhere
// {
// "keys": ["ctrl+e"],
// "command": "emmet_expand_abbreviation"
// },
// Enter abbreviation mode: explicitly enter abbreviation anywhere
// with interactive preview
// {
// "keys": ["ctrl+."],
// "command": "emmet_enter_abbreviation"
// },
// Wrap with Abbreviation
// {
// "keys": ["ctrl+w"],
// "command": "emmet_wrap_with_abbreviation",
// "context": [{"key": "setting.is_widget", "operand": false }]
// },
// Balance Outward
// {
// "keys": ["ctrl+d"],
// "command": "emmet_balance",
// "args": { "direction": "outward" }
// },
// Balance Inward
// {
// "keys": ["ctrl+j"],
// "command": "emmet_balance",
// "args": { "direction": "inward" }
// },
// Go to Matching Tag/Tag Pair
// {
// "keys": ["ctrl+shift+t"],
// "command": "emmet_go_to_tag_pair"
// },
// Remove Tag
// {
// "keys": ["super+'"],
// "command": "emmet_remove_tag"
// },
// Split/Join Tag
// {
// "keys": ["shift+super+'"],
// "command": "emmet_split_join_tag"
// },
// Go to Next Edit Point
// {
// "keys": ["ctrl+alt+right"],
// "command": "emmet_go_to_edit_point"
// },
// Go to Previous Edit Point
// {
// "keys": ["ctrl+alt+right"],
// "command": "emmet_go_to_edit_point",
// "args": { "previous": true }
// },
// Select Next Item
// {
// "keys": ["shift+super+."],
// "command": "emmet_select_item"
// },
// Select Previous Item
// {
// "keys": ["shift+super+,"],
// "command": "emmet_select_item",
// "args": { "previous": true }
// },
// Evaluate Math Expression
// {
// "keys": ["shift+super+y"],
// "command": "emmet_evaluate_math"
// },
// Increment/Decrement Number
// {
// "keys": ["ctrl+up"],
// "command": "emmet_increment_number",
// "args": { "delta": 1 }
// },
// {
// "keys": ["ctrl+down"],
// "command": "emmet_increment_number",
// "args": { "delta": -1 }
// },
// {
// "keys": ["alt+up"],
// "command": "emmet_increment_number",
// "args": { "delta": 0.1 }
// },
// {
// "keys": ["alt+down"],
// "command": "emmet_increment_number",
// "args": { "delta": 0.1 }
// },
// {
// "keys": ["shift+alt+up"],
// "command": "emmet_increment_number",
// "args": { "delta": 10 }
// },
// {
// "keys": ["shift+alt+down"],
// "command": "emmet_increment_number",
// "args": { "delta": -10 }
// },
// Update Image Size
// {
// "keys": ["shift+ctrl+i"],
// "command": "emmet_update_image_size"
// },
// Convert data:URL
// {
// "keys": ["shift+ctrl+d"],
// "command": "emmet_convert_data_url"
// }
{
"keys": ["tab"],
"command": "emmet_expand_abbreviation",
"args": { "tab": true },
"context": [
{ "key": "emmet_abbreviation" },
{ "key": "emmet_tab_expand" }
]
},
{
"keys": ["enter"],
"command": "emmet_expand_abbreviation",
"context": [
{ "key": "has_emmet_forced_abbreviation_mark" },
{ "key": "emmet_abbreviation" }
]
},
{
"keys": ["shift+tab"],
"command": "next_field",
"context": [
{ "key": "has_next_field" },
{ "key": "emmet_abbreviation" },
{ "key": "emmet_tab_expand" }
]
},
{
"keys": ["escape"],
"command": "emmet_clear_abbreviation_marker",
"context": [
{ "key": "has_emmet_abbreviation_mark" },
{ "key": "auto_complete_visible", "operator": "equal", "operand": false }
]
},
{
"keys": ["escape"],
"command": "emmet_hide_tag_preview",
"context": [
{ "key": "emmet_tag_preview" }
]
}
]
Sublime Textのキーバインド設定を開く
先ほどのDefault (OSX).sublime-keymapの中から必要なコードをsublimeのキーバインドに追記します。
Sublime Textを開いた状態で画面左上のsublime → Preferences → Key Bindingsと移動します。
もしくはSublime Text → Preferences → Package Settings → Emmet→ User もしくは Key Bindingsに移動します。
Preferencesが選択できない方はファインダーの
ユーザー/ライブラリ/Application Support/Sublime Text 3/Packages/User/Default (OSX).sublime-keymapと移動します。
もしくは日本語化のプラグインを使用している場合は、表示されないかもしれないので「日本語にしなくても、もう大丈夫！」って感じの時は、アンインストールしちゃってもいいかもしれません。
キーバインドを追記する
最後に追加したいキーバインドをDefault (OSX).sublime-keymapに追記すれば完了です！
こんな感じです！
あとはお好みでカスタマイズすればより良いコーディングライフを送れます！
