BracketsでEmmetを使うときの覚え書き

Pocket

エディターをBracketsに移行しつつあるのですが、先日久しぶりにコーディングをしたら、Emmetのショートカットが以前使ってたエディターと違ってて混乱する事態に。
おさらいをこめて、いろいろまとめてみました。

基本的な使い方

h1.logo

a[href="/"].link

.header>h1>a{ロゴ}

img[src="img_$$.png"]*3

こんな感じで書いたものがtabキーを押すと…

<h1 class="logo"></h1>

<a href="/" class="link"></a>

<div class="header">
<h1><a href="">ロゴ</a></h1>
</div>

<img src="img_01.png" alt="">
<img src="img_02.png" alt="">
<img src="img_03.png" alt="">

サクッとコードを展開してくれます。

書き方のルールはすごく簡単。
IDやclass、>あたりを覚えておくだけでも、かなり便利です。

概要 書き方  サンプル
要素 E article
IDの指定 E#id #header
classの指定 E.class a.link
属性の指定 E[attr] a[href=”/”]
階層を下げる E>e h1>a
階層を上げる E>e^p h1>a^p
隣接する要素 E+E .header>h1+p
子要素 E+ dl+
要素の複製 E*n ul>li*3
連番 $*n ul>.menu$*3>a
テキスト挿入 {text} p{text}

フィルター

「|」 をつけると、フィルター機能が使えます。

コメントをつける(c)

<!--サンプル-->
.entry>h1|c

<!--展開-->
<div class="entry">
<h1></h1>
</div>
<!-- /.entry -->

エンティティ化(e)

<!--サンプル-->
.entry>h1|e

<!--展開-->
&lt;div class="entry"&gt;
&lt;h1&gt;&lt;/h1&gt;
&lt;/div&gt;

1行で書く(s)

<!--サンプル-->
.entry>h1|s

<!--展開-->
<div class="entry"><h1></h1></div>

BEMで書く(bem)

<!--サンプル-->
.block>.-element+.-element>._modifier|bem

<!--展開-->
<div class="block">
<div class="block__element"></div>
<div class="block__element">
<div class="block__element block__element_modifier"></div>
</div>
</div>

ショートカット

Emmetを入れるとメニューに便利なショートカットが追加されます。
(※ショートカットキーはMacでのBracketsデフォルトのショートカットをあげてます。)

前・次の編集ポイントへ移動(Previous/Next Edit Point)

+ option + ←→

数値の計算(Evaluate Math Expression)

+ shift + Y

タグまたはタグのコンテンツの境界を選択(Balance)

+ option + B (内側から選択)
+ option + shift + B (外側から選択)

開始タグと終了タグの間を移動(Go to Matching Pair)

+ shift + T

選択範囲内の文字列を1行に変換(Merge Lines)

+ shift + M

類似するプロパティの値を一括指定(Reflect Value)

+ shift + option + R

開始・終了タグの削除(Remove Tag)

+ shift + K

次・前のDomへ移動(Select Next/Previous Item)

+ shift + .
+ shift + ,

タグ→空タグ/空タグ→タグに変換(Split/Join Tag)

+ shift + J

コメントの挿入・取り消し(Toggle Comment)

+ /

任意のタグで囲む(Wrap with Abbreviation)

+ shift + A

開始・終了タグの同時編集(Update Tag)

+ Shift + I

数値の増減(Increment/Decrement Number)

+ option + ↑↓(10ずつ増減)
+ shift + ↑↓(1ずつ増減)
+ shift + option + ↑↓(0.1ずつ増減)

Expand Abbreviation(interactive)

いちいちtabを押さなくても、リアルタイムでも編集することもできます。

CSSの場合は+をつければOK。

今回はhtmlに絞ってみましたが、CSSもいろいろと便利なEmmet。
もっと詳しい書き方については、公式のドキュメント、もしくはチートシートをチェックしてみてください。

Bracketsについてもうちょっと知りたい方はこちらもどうぞ。

Bracketsの主な機能とプラグインのまとめ

中の人について

matsui
大阪でwebのお仕事をしています。
ブログでは最近学んだことや、勉強会に参加したことを書いてます。