【Atom】Atomでキーバインド(ショートカット)を変更する

Atomをインストールして、皆さんお気に入りのパッケージをインストールしますよね。私も『emmet』というパッケージをインストールして使おうとしました。

しかし結果的に使えなかったのです。なんで使えなかったのか。『emmet』を実行するコマンドを知らなかったからです。

本日はAtomにおける『emmet』の使用方法を含め、キーバインドをカスタマイズする方法を紹介していきたいと思います。

『emmet』をすぐにでも使えるようにしたい方は、このページの一番下にあるコードをコピーしてキーマップに貼り付けてください。ctrl-eで使えるようになるはずです。

emmetはctrl-eで使う

emmetのキーバインドは最初ctrl-eに設定されています。つまり「p」と入力した後にctrl-eを押せば「<p></p>」と展開されるわけです。

それが分かれば十分と思う方もいるかもしれませんが、それだけでは不十分なのです。Atomではパッケージをインストールすればするほど、キーバインドが被り、上書きされていきます。私の場合最初に6つほどパッケージをインストールしたのですが、その時点でctrl-eでemmetを使うことはできませんでした(何をインストールしたのかは覚えていません...)。

emmetに限らずパッケージをインストールしていくうえで、キーバインド変更方法は必須の知識です。しかしこれが結構難しそう...挫折する人も多いと思うので、今回は私が理解した範囲で簡単に説明していきたいと思います。

キーバインドを変更する

私のAtomはメニューが日本語に変換されているので、その点はご了承ください。日本語に変換する方法を知りたい方はこちらからどうぞ。

先ほどもお話しした通り、今回は『emmet』のキーバインド変更を例にして説明していきたいと思います。

➀「ファイル→環境設定」から設定画面を開きます。

説明画面1

➁「keybindings」からキーバインドの設定画面を開きます。

説明画面2

➂現在ctrl-eのキーバインドに何が設定されているか確認します。適当なファイル(sample.html)をファイル作成し、ctrl-.を押します。画面下に新たな画面が現れ、キーバインドの動作が確認できるようになります。この画面を消したいときはもう一度ctrl-.を押します。

説明画面3

➃ctrl-eの動作を確認します。先ほどの状態で、画面に「p」を入力し、ctrl-eを入力します。すると下の画面に変化が見られ、現在「find-and-replace:use-selection-as-find-pattern」というコマンド実行されているのが分かります(緑に変化しているのが動作しているコマンドです)。その下に「emmet:expand-abbreviation」とemmetのコマンドがありますが、これは動作していません。

説明画面4

➄キーバインドの設定画面に戻り、ctrl-eで検索します。先ほど動作していた「find-and-replace:use-selection-as-find-pattern」のコマンド(下図上から2番目)の左アイコンをクリックします。画面は変化しません。1度クリックすれば大丈夫です。
次に画面上青字の「キーマップファイル」からキーマップファイルに移動します。

説明画面5

➅キーマップの画面に移動したらctrl-vなどを押して「貼り付け」をします(先ほどアイコンをクリックした時にコピーしてくれています)。このファイルにおける「#」はコメントの役割をしています。下図の緑字のように貼り付けができていれば大丈夫です。
「'.platform-win32 atom-text-editor, .platform-linux atom-text-editor':」は適用範囲の選択だと思われます。実際にコマンドを指定しているのは「'ctrl-e': 'find-and-replace:use-selection-as-find-pattern'」の部分です。

説明画面6

➆ ➂で確認したemmetのコマンド「emmet:expand-abbreviation」をctrl-eのキーバインドに設定します。先ほどの画面の「find-and-replace:use-selection-as-find-pattern」の部分をemmetのコマンド「emmet:expand-abbreviation」に変更します。変更した後はファイルを保存しましょう。

説明画面7

➇emmetのコマンドがctrl-eで使えるようになっているか確認しましょう。先ほど作成したファイル(sample.html)で「p」と入力してctrl-eを押してみて下さい。下図のような変化があるはずです。

説明画面8

まとめ

分かりやすかったでしょうか。基本的なキーバインドの変更方法は今までやったものと変わりません。コマンドのコードはネットにもなかなか載っていないようなので自分で調べましょう。ctrl-.やキーバインドの設定画面で調べられるはずです。

また適応範囲のコード(呼び方は適当)、今回だと「'.platform-win32 atom-text-editor, .platform-linux atom-text-editor':」みたいなやつですね。これに関して、同じコードをキーマップのファイル上で2回以上書いてはいけないようです。誤動作が起こりました。

今回説明した方法で、キーバインドを指定できない場合もあるようです。その場合、キーバインドの設定をすべて消すパッケージをインストールしたり、unset!、native!などを使用すれば何とかなるようですが、詳しいことは分からなかったので他のサイトを参考にしてください。

最後にすぐにでもemmetのコマンドを使いたいという人にためにctrl-eにemmetのコマンドを設定するコードを貼っておきます。キーマップのファイルに貼り付けて保存して下さい。

'.platform-win32 atom-text-editor, .platform-linux atom-text-editor':
  'ctrl-e': 'emmet:expand-abbreviation'