選択範囲を一発でタグで囲む方法(VScode)

僕がVScodeでマークアップするときにめちゃくちゃ多用する機能について解説します！
これをすることで大幅に作業効率が上がります！

はじめに

例えばこんなコードがあったとします。

index.html

  <div class="text">
    こちらが本文です
  </div>

これを書いた後に
「あ！divタグじゃなくてpタグで囲まないといけなかった(　ﾟдﾟ)」
みたいな時ないですか？？？

僕はこれすごく思ってて、憂鬱になりながらも「divタグを消してpタグの開始タグを書いて、末尾に終了タグを書く」という動作をずっとしていました。

これが1つならいいものの、以下のような場合だと、友達の家の猫が自分にだけ寄ってこない時くらいの煩わしさを感じてしまいます。

↓liタグで囲むの忘れてた場合

index.html

  <div class="text">
    <ul>
      リスト1
      リスト2
      リスト3
      リスト4
      リスト5
      リスト6
      リスト7
      リスト8
      リスト9
    </ul>
  </div>

準備

３分とかからない準備が必要です！

1.VScode起動
2.キーボードショートカットの設定画面にいく
3.同画面の検索窓に「emmet wrap」を入力
4.「emmet:ラップ変換」と「emmet:個々の行でラップ変換」にショートカットキーを割り当てる

これで準備完了です！！！

実践

それでは使っていきましょう！

1.まず、タグで囲みたい部分を選択します

2.割り当てたショートカットキーを押すと、上に窓が出てくるのでそこにタグを書きます
(今回はliタグとします)

3.Enterキーを押すと、タグで囲むことができます

下で実行結果を見てみましょう！

「emmet:ラップ変換」

「emmet:ラップ変換」に割り当てたショートカットキーを押し、上の窓に「li」と入力すると、

index.html

<div class="text">
    <ul>
      <li>
        リスト1
        リスト2
        リスト3
        リスト4
        リスト5
        リスト6
        リスト7
        リスト8
        リスト9
      </li>
    </ul>
  </div>

こんな感じで選択した部分の最初と最後にliタグが入り、一括りにできました！

ですが今回のコードの場合は、リスト1〜9のひとつひとつをliタグで括りたいですね

その場合は、「emmet:個々の行でラップ変換」の方を使います！

「emmet:個々の行でラップ変換」

「emmet:個々の行でラップ変換」に割り当てたショートカットキーを押し、上の窓にタグを入力するのですが、
今回は「li」と入力するのではなく「li*」と入力します！
そうすることで、、、

index.html

<div class="text">
    <ul>
      <li>リスト1</li>
      <li>リスト2</li>
      <li>リスト3</li>
      <li>リスト4</li>
      <li>リスト5</li>
      <li>リスト6</li>
      <li>リスト7</li>
      <li>リスト8</li>
      <li>リスト9</li>
    </ul>
  </div>

理想通りになりました！！！

おしまい！

参照

【Visual Studio Code】選択範囲を一発でHTMLタグで囲む方法【簡単・便利】
https://www.youtube.com/watch?v=n6usaCJFKNo&list=LLTpOM4yhFYJcQCl5I853uhg&index=10