ワイヤード・パンチ

元・大阪人が、岡山の山奥でも生きていけることを証明するためのブログ。

AtomのEmmetのtabキーのコマンドを無効化する方法。

訳あって、普段使うテキストエディタを、BracketsからAtomに変更しました。

Atomにも、コーディングするうえで必須と言えるプラグイン、Emmetがあったのでインストールしました。

しかしその後、行のインデントを取ろうといつもどおりtabキーを押すと、Emmetの展開コマンドがなぜか実行されてしまい、これではまともにインデントできません。

広告

すでに公開されてる手順を試したが…。

tabキーでインデントなんて、アプリ特有の機能ではなく、あらゆるOSの標準機能だというのに、なぜ重複するキーに、しかもたった1つのキーに、プラグインの機能を割り当ててしまってるのか

開発者はいったい何を考えているのでしょうか、バカとしか思えません。せっかくの便利なプラグインなのに。

ベンダープレフィックスも今どきいらないんですよ。無くてもほぼすべてのブラウザでグラデーションとか使えます。

それはさておき、愚痴を吐いても仕方ありません。

このままでは作業がままならないので、この使いづらいコマンドをなんとかしなければ。

そして見つかったのか、下記のサイト。

AtomでEmmetを使用するならショートカットキーをTab+Shiftに | iwb.jp

こちらのサイトの場合ではtabキーに困っている状況が異なるのですが、tabキーを何とかしたいことには変わりありません。

解決方法としては、tabキーに割り当てられているEmmetのコマンドを、別のキーに割り当てを変えるということ。

今回の場合、shift+tabですね。

キーバインドを変えるためにkeymap.csonを開き、下記を追記して上書き保存をしました。

'atom-text-editor[data-grammar="text html basic"]:not([mini]), atom-text-editor[data-grammar~="erb"]:not([mini]), atom-text-editor[data-grammar~="jade"]:not([mini]), atom-text-editor[data-grammar~="css"]:not([mini]), atom-text-editor[data-grammar~="stylus"]:not([mini]), atom-text-editor[data-grammar~="sass"]:not([mini]), atom-text-editor[data-grammar~="scss"]:not([mini])':
	'shift-tab': 'emmet:expand-abbreviation-with-tab'

なお、保存後にAtomを再起動する必要はありません。即座に反映されます。

そして変更されたか確認するために、インデントを取りたいところでtabキーを押してみると…なぜかEmmetの展開コマンドがまた実行されてしまいました

いったいどういうことなのか。キーバインドの設定画面をもう一度見てみると…。

もともとあったtabキーのコマンドは何も変わらずそのまま残っており、shift+tabでもコマンドが実行されるようになっていました。

つまり、キーバインドの変更にはならず、むしろ追加になっていたのです。これでは余計に悪化しています。

なお、現在のAtomのバージョンは1.24.0です。さきほどの記事とはバージョンが違うので、仕様が変わってしまったのでしょうか。

同じキーに違うコマンドを割り当てることで解決。

他にキーバインドの方法はないかと探したものの、結局見つからず。

やはりkeymap.csonでしか、キーバインドする方法はなさそうです。

それなら、どうすればいいのか。

キーの変更はできず、必ずキーの追加になってしまうということなら、他の既存のコマンドにした場合はどうなるのか。

'atom-text-editor[data-grammar="text html basic"]:not([mini]), atom-text-editor[data-grammar~="erb"]:not([mini]), atom-text-editor[data-grammar~="jade"]:not([mini]), atom-text-editor[data-grammar~="css"]:not([mini]), atom-text-editor[data-grammar~="stylus"]:not([mini]), atom-text-editor[data-grammar~="sass"]:not([mini]), atom-text-editor[data-grammar~="scss"]:not([mini])':
	'tab': 'editor:indent'

tabキーで本来行えることと言えばインデントなので、上記のとおり記述して、それを追加してみます。

キーバインドの一覧にも追加されましたが、tabキーによるEmmetは相変わらず残っています。

それでも構わずテキスト入力に戻り、tabキーを押してみると…。

Emmetが発動することなく、無事にいつもどおりインデントが実行されました

おそらくさっきのコマンドを入れたことで、tabによるインデントが最優先になったのだと思われます。

これでようやく、まともにコーディングに取り掛かれそうです。

Emmetを実行するのは、やはりctrl+Eが一番ですね。片手で打てるし、頭文字から連想できるからわかりやすいし。

余談。なぜBracketsからAtomに乗り換えた?

まずcssの作業中、「df」と入力してから「display:flex」に展開するためEmmetを実行すると、ベンダープレフィックスがずらずらと付いてきてジャマだったため。

先述のように、今のブラウザならベンダープレフィックスなしでもflexは完全に対応しているからです。

AtomのEmmetでvendor-prefixが勝手に挿入されるのを無効にする – Qiita

AtomのEmmetであれば、上の記事のとおりにやればベンダープレフィックスの付加を阻止できました。

しかしBracketsのEmmetでは、ベンダープレフィックスの付加を止める方法が、いくら探しても出てきませんでした。

Atom版も2016年で更新は止まってるものの、Brackets版はさらに早い、2015年ですでに止まっているので、アップデートによる機能追加は望めません。

今の時代にスタイルを組むならflexを使うのが圧倒的に便利ですが、その便利なコマンドを入れるたびに阻害されては、たまったものじゃありません。

もうひとつBracketsを辞めた原因は、日本語入力中、予測変換ウインドウが入力中の文字に被ってしまう現象が、いつまで経っても直らないこと。

Brackets 1.8にて予測変換がテキストを隠して困ってる。(未解決) | ワイヤード・パンチ

バージョン1.8になってからこの不具合は発生し、バージョン1.12が出ている今になっても、いまだに直っていません。

あまりにもジャマなため、バージョン1.7に戻して使い続けていましたが、いつまでも古いバージョンを使い続けるのは、嫌気が差してきました

ブラウザでいうと、いまだにIEを使っているようなものです。OSで言うと、いまだにWindowsXP。…それはちょっと言い過ぎか。

The predictive transformation window of the IME overlaps the character being input. · Issue #14115 · adobe/brackets

githubにissueも投げてはいるのですが、いまだに返答はもらえず。

よって、Bracketsと比べると圧倒的に開発が盛んで、しょっちゅうアップデートが配信されるAtomを試してみた。というわけです。

ただ、atomにも弱点があり、markdownを入力中、強調の部分を入れるためにアスタリスク2つで文章の左右を囲っても、色分けがされないこと。

というわけで、ブログの記事を書く時だけは、仕方なくBracketsに戻っています。バージョンは相変わらず1.7のままで。