Visual Studio Code：Emmet記法を使って複数要素を入力する

複数要素を入力する

<p>タグを３つ入力するには「p*3」と入力すると、

<p></p>
<p></p>
<p></p>

と出力されます。

また、classを指定して「div.item*4」と入力すると、

<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>

と出力されます。

連番を指定して入力する

連番を指定して入力する場合は「$」を使って「div.item$*3」と入力すると、

<div class="item1"></div>
<div class="item2"></div>
<div class="item3"></div>

と出力されます。

なお「$」を複数使って「div.item$$$*3」と入力すると、

<div class="item001"></div>
<div class="item002"></div>
<div class="item003"></div>

と出力されます。

さらに、「@」を使って「div.item$@3*3」と入力すると、

<div class="item3"></div>
<div class="item4"></div>
<div class="item5"></div>

と出力されます。

情報源

#04 複数の要素を展開してみよう | Emmet入門

複数のHTMLタグを一気に展開する方法について見ていきます。

dotinstall.com

書籍