Emmet - 連番生成機能でかしこく時短

Emmetの連番生成機能を使いこなすことで、より効率的に入力ができます。

ここでは、基本的な連番機能の使い方、0から、途中から、逆順での連番作成の方法を紹介します。

連番生成機能の基本的な使い方

Emmetで連番を生成するには、「$」記号を使います。

div#sample$*5

と入力すると次のように展開されます。

<div id="sample1"></div>
<div id="sample2"></div>
<div id="sample3"></div>
<div id="sample4"></div>
<div id="sample5"></div>

テキストの中にも連番を作成する

div要素の中にテキストも加えてみます。 テキストは「｛｝」を使います。

div.sample${text$}*5

上の入力は次のように展開されます。

<div class="sample1">text1</div>
<div class="sample2">text2</div>
<div class="sample3">text3</div>
<div class="sample4">text4</div>
<div class="sample5">text5</div>

0埋め（0パディング）で桁をそろえる

1, 2, 3という連番だけでなく、 01, 02, 03のように0パディングした連番を生成することもできます。

0パディングする場合、「$」記号の数が桁数を表します。2桁の連番なら「$$」、3桁なら「$$$」とします。

div#sample$$*5

上の入力は次のように展開されます。

<div id="sample01"></div>
<div id="sample02"></div>
<div id="sample03"></div>
<div id="sample04"></div>
<div id="sample05"></div>

「0」や「途中の番号」から連番を作成する

「$」記号だけなら「1」からですが、「0」や「途中の番号」から連番を生成することもできます。

「$」記号の後に「@」をつけて、開始する数値を指定します。

0から始める場合は、「$@0」とします。

div{text$@0}*5

上の入力は次のように展開されます。

<div>text0</div>
<div>text1</div>
<div>text2</div>
<div>text3</div>
<div>text4</div>

11から始めたい場合は「$@11」と入力します。

div{text$@11}*5

上の入力は次のように展開されます。

<div>text11</div>
<div>text12</div>
<div>text13</div>
<div>text14</div>
<div>text15</div>

降順で連番を生成する

3, 2, 1 のように降順で連番を生成する場合は「$@-」と入力します。

div#sample$@-*5

上の入力は次のように展開されます。

<div id="sample5"></div>
<div id="sample4"></div>
<div id="sample3"></div>
<div id="sample2"></div>
<div id="sample1"></div>

のはずなのですが・・・

私が使用しているエディタ「VS Code」では、この降順は機能しませんでした。

使用環境によっては機能しない場合もあるようです。

Emmetのチートシートはこちら