2024.10.31

VSCodeのちょっと嬉しい小技

1 ここの要素全部をdivで囲みたい…
2 使用方法
3 ショートカット設定方法
4 プラグインとの比較
5 まとめ

こんにちは、初めてブログを担当させていただきます。
他のスタッフは難しいことを多く書いている（主に社長）のですが、私はWEB制作における初心者向けの事や、ちょっと役に立つ小技を紹介していきたいと思います。

今回はVSCodeのちょっと嬉しい小技をご紹介します。
WEB制作をするとき、VSCode（Visual Studio Code）というテキストエディタを使用する方が多いのではないかと思います。
様々な機能があり人気のテキストエディタですが、その機能の一つ「Emmet」を使ったものです。

ここの要素全部をdivで囲みたい…

HTMLを書いていて皆さんは後から「ああ…ここの要素全部をdivで囲みたい…」など思ったことはありませんか。ありますよね。あるんですよ。皆。
ただ、これが地味に面倒。<div>と打って、閉じタグをコピーして貼り付けてと…要素が多いとどこに貼り付けるんだっけ？？と迷ったりと…。
そんな煩わしさが、ちょっとした設定をするだけで簡単に解決できてしまいます。

使用方法

➀任意の要素を選択する
➁Ctrl （command）+ Shift + Pで「wrap」または「ラップ」と入力
➂「Emmet:ラップ変換」を選択
➃divなど囲みたいタグの名称を入れる
➄エンターで決定！

簡単です。

ショートカット設定方法

ただ、これを毎回打つのは大変なのでショートカットを作成しましょう。
➀ファイル→「ユーザー設定」→「キーボードショートカット」
➁「入力してキーバインド内を検索」のところに「wrap」または「ラップ」と入力
➂鉛筆マークを押して任意のショートカットを入力する

私はCtrl+W,Ctrl+Wにしてます。なんだか2回タンタンと打つのが楽しくなってきます。
他のショートカットキーと被らないように、お好きなショートカットキーを入れてみてください！

プラグインとの比較

この方法の他にもプラグイン「htmltagwrap」というものを使用したやり方もあるようです。
Alt（Option）+Wで要素を任意のタグで囲めるようなので、ほぼ上記の方法と同じです。
ただ、Emmetの方がショートカットを押した後さらに「.」を押すだけで「class=””」というクラス指定、さらにそのまま文字を打つとクラス名まで書けてしまうので、Emmetの方がおすすめです。