ワードプレス

Sublime Text 3のEmmetでショートカットが反応しない時の解決方法

2021年2月13日

キーボードのショートカット
・Emmetのショートカットがきかない
・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

Emmetの環境設定メニュー

日本語化している場合は基本設定から行けます

キーバインドを開くと下記のような画面になります。

Emmetのキーバインド設定画面

左側がデフォルト設定で右がユーザー設定です。左はコメントアウトされてグレーになっていて、右には何もありません。ショートカットが使えない原因を探っている時に何度もこの画面を開いていたのですが、右ばかり見ていて左は見ていなかったため、気がつくのに結構時間がかかってしまいました。

僕が使いたかったのは計算と画像サイズ取得のショートカットなので、計算の『Evaluate Math Expression』と画像サイズ取得の『Update Image Size』の項目を見つけます。

Emmetのvaluate 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にするのに今まで計算機を使って計算していたので、すごく時間がかかっていたんですよね。もうこれが本当に面倒でコーディングが嫌になるくらいだったのですが、やっとショートカットが使えるようになって、時間短縮とストレス軽減になりました!

-ワードプレス

© 2021 たくみぶ