Bracketsの「Emmet」と「Brackets Snippets (by edc)」が競合する問題を解決する

Adobeが開発した、イケてるエディタ「Brackets」を使い始めました。これまでSublime TextやAtomを試したのですが、いまいちしっくりこなかったんですよね。Bracketsも他のエディタと同様に拡張をインストールすることで機能強化を行うことができます。

そこで導入したのが、みんな大好きな「Emmet」です。
それからスニペット管理を簡単に行うことができる「Brackets Snippets (by edc)」もインストールしました。

ところが、この両方を同時にインストールすると、TabキーでEmmetの展開ができなくなってしまいました。
具体的には「img」というキーでSnippetsの登録をすると、Emmetのimgタグの展開と競合しまうのです。

何が原因かと調査したところ、EmmetとSnippetsの2つの拡張でtabキーの動作が競合していることがわかりました。そこでTabキーの割り当てを変更することで問題が解決しました。今回はその手順を紹介します。

Emmetのタグの展開をTabキー以外のキーを割り当てます。
その方法ですが、まずBracketsのヘルプメニューから「拡張機能のフォルダーを開く」メニューをクリックします。

20151214_001

このメニューを開くと「extensions」というフォルダにたどり着けるため、そこから

「user\brackets-emmet」

というフォルダを開きます。
そのフォルダの中にある「keymap.json」というファイルをエディタで開きます。

20151214_002

ファイルを開いたら、「”expand_abbreviation_with_tab”」のキーの配置を変更します。

20151214_003

デフォルトでは「tab」になっているので、今回の例ではShift+Enterにしました。

20151214_004

これでEmmetのタグの展開がShift+Enterキーが割り当てられるようになりました。

まとめると、
Emmetによるタグの展開→Shift+Enter
Brackets Snippets (by edc)によるスニペットの挿入→Tab
という風になりました。
2つのプラグインを入れて困ってる方がいましたら、是非お試しください!

==========
ブログの更新情報をTwitterやfacebookで紹介しています。ぜひフォローお願いします!
Twitter → @jugedred
facebook → Jugedred Project

関連記事


この記事をかいた人

ドレッド Webクリエイター、ライター

Web制作やライティングなどインターネットを使って自由に暮らしているドレッドです。このブログではWeb制作やライティングでお役に立ちそうな知識から、ドレッドのプライベートな出来事まで幅広いネタを取り扱っています。ご質問、ご要望、お仕事のご依頼はお問い合わせフォームからどうぞ! 2016年10月から放送大学に入学しました。

便利ツール | Posted on 2015/12/14 20:04

※コメントは管理人の承認後に公開されます。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です