【VSCode】 選択した「要素」を別の「新しい要素(タグ)」で囲む方法

この記事は約2分で読めます。
記事内に広告が含まれています

イメージ

こんにちは、さち です。

普段、ウェブサイトを作るときは「Visual Studio Code(以下:VSCode)」を使っています。動作が軽く色々な機能も追加できるのに、無料で利用できる最強のコードエディターアプリです。

今回は、この VSCode で「要素」を別の新しい HTML タグ(新しい要素)で簡単に囲む方法について書いていきます。

便利ですし意外とよく使うので、ぜひ覚えて使いこなして下さい!

スポンサーリンク

欲しい機能は標準実装されている

  1. <span> タグが3個あります。これらすべてをサクッと <div> で囲んでみましょう。
    VSCode の画面
  2. <span> をすべて選択して、「ショートカットキー(※設定方法は後述)」を押します。
    VSCode の画面
  3. 入力欄が出るので、囲みたい「HTML タグ」を Emmet 方式で書きます。
    VSCode の画面
  4. すべての <span> を、mirapa クラスを持つ <div> で囲むことができました。
    VSCode の画面

欲しかった機能は VSCode に標準で実装されています。拡張機能が必要ないのはありがたいですね。

しかし、問題なのは「機能」はあるけど「ショートカットキー」が割り当てられていないということ。

ショートカットキーを使いたい場合は、自分で割り当てる必要があります。その手順を次項で見ていきましょう。

ショートカットキーが必要ない場合は、「要素」を選択 → 「コマンドパレット」を表示 → 「wrap」で検索 → 「Emmet: ラップ変換」でOK

ショートカットキーを割り当てる

「要素を新しいタグで囲む」機能に、自分が使いやすい「ショートカットキー」を新しく割り当ててみましょう。

  1. ウィンドウ左下(アクティビティバー)にある「(管理)」をクリック。
    管理
  2. キーボードショートカット」をクリック。
    キーボードショートカット
  3. 「検索」に emmet wrap と入力します。
    VSCode の画面
  4. Emmet: ラップ変換」コマンドの左端にある「(キーバインドの追加)」アイコンをクリック。
    VSCode の画面
  5. 割り当てたいショートカットキー(今回は Ctrl + Shift + G キー)を押して、Enter キーを押します。(ショートカットキーが他の機能と競合している場合はこちらの方法で解決する)
    VSCode の画面
  6. ショートカットキーを割り当てることができました。
    VSCode の画面
  7. これで、ショートカットキーを使用して……
    VSCode の画面
  8. 簡単に「要素」を新しい「タグ」で囲めるようになりました。
    VSCode の画面

コメント

タイトルとURLをコピーしました