・Emmetで計算をするショートカットを知りたい
・Emmetで画像サイズを取得するショートカットが知りたい
という方向けの記事です。
Emmetのショートカットで計算と画像サイズ取得を使いたいのに、くらショートカットキーを押しても動かない。パッケージを入れ直したり、Emmetをインストールし直しても駄目。原因はショートカットの設定でしたので直し方をご紹介します。
ちなみに計算と画像取得のショートカットはこちらです。
計算のショートカット
Mac：Shift + Cmd + Y
Win：Shift + Ctrl + Y
画像取得のショートカット
Mac：ctrl + i
Win：ctrl + u
Emmetのショートカットが動かない原因はデフォルトの設定
Emmetのショートカットはデフォルト設定でコメントアウトされていて無効になっているのが原因でした。気がつけばなんてことないのですが、これではいくらショートカットキーを押しても動かないはずです。キーバインドを開いてショートカットを登録していきます。
Preferenves→Package Setting →Emmet→Key Bindings
日本語化している場合は基本設定から行けます
キーバインドを開くと下記のような画面になります。
左側がデフォルト設定で右がユーザー設定です。左はコメントアウトされてグレーになっていて、右には何もありません。ショートカットが使えない原因を探っている時に何度もこの画面を開いていたのですが、右ばかり見ていて左は見ていなかったため、気がつくのに結構時間がかかってしまいました。
僕が使いたかったのは計算と画像サイズ取得のショートカットなので、計算の『Evaluate Math Expression』と画像サイズ取得の『Update Image Size』の項目を見つけます。
下記のように[ ]の中へ｛ ｝,の部分を右のユーザー設定へコピペしていきます。
下記のコードをコピペしてもOKです。
計算：Evaluate Math Expression
CSS
{ "keys": ["shift+super+y"], "command": "emmet_evaluate_math" },
※superというのはmacだとコマンドになります。
画像サイズ取得：Update Image Size
CSS
{ "keys": ["shift+ctrl+i"], "command": "emmet_update_image_size"},
他の使いたいショートカットも左から右へコピペして保存すればOKです
これで無事ショートカットが使えるようになります。
まとめ：コーディングの時間短縮とストレス軽減になった
レティナ用の画像の幅と高さを1/2にするのに今まで計算機を使って計算していたので、すごく時間がかかっていたんですよね。もうこれが本当に面倒でコーディングが嫌になるくらいだったのですが、やっとショートカットが使えるようになって、時間短縮とストレス軽減になりました！
