ホームページ制作

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のヘルプメニューから「拡張機能のフォルダーを開く」メニューをクリックします。

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

「userbrackets-emmet」

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

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

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

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

まとめると、

Emmetによるタグの展開→Shift+Enter
Brackets Snippets (by edc)によるスニペットの挿入→Tab

という風になりました。
2つのプラグインを入れて困ってる方がいましたら、是非お試しください!

お仕事のご相談・ご依頼をお待ちしております

コレカラウェブでは、Webライティング・SEO・メディア運営・障害者支援のお仕事を承っております。専門知識が豊富な村上英輝が直接担当いたします。ご相談・お見積もりは無料です。まずはお気軽にお問い合わせくださいませ。

===

Twitterアカウント:@corekaraweb
⇒管理人・村上英輝が発信するフリーランスの日常を発信しています。WebライターやSEOライターのお役立ち情報もたまにあるかも! フリーランスの方やライターの方はフォローバックしておりますので、お気軽にフォローしてください!

facebookページ:コレカラウェブ
⇒「コレカラブログ」を含めたコレカラウェブのブログ運営の裏側を公開しています。ブログに公開する前の先行情報や運営方針などを記録しています。PVや収益に関する生々しい話も!よろしければ「いいね!」お願いいたします。

「いいね!」と思ったら、クリックお願いいたします<m(__)m>
にほんブログ村 小遣いブログ Webライター・ブログライターへ にほんブログ村 IT技術ブログ SEO・SEMへ にほんブログ村 小遣いブログ ブログアフィリエイトへ
ABOUT ME
村上英輝
2018年4月に開業したコレカラウェブ代表の村上英輝です。フリーランスとしてWebライティング・SEO・メディア運営・障害者支援のお仕事を一貫して承ってきました。現在はフルリモートのWeb制作会社でSEO担当者もやっています。このブログではコレカラウェブのお仕事で得たノウハウやテクニックを詳しく紹介しています。所有資格:認定SEOコンサルタント・SEO検定1級・Webライティング実務士・ウェブ解析士・情報セキュリティスペシャリスト・FP2級・AFPなど。

COMMENT

メールアドレスが公開されることはありません。

CAPTCHA