こんにちは、さち です。
普段、ウェブサイトを作るときは「Visual Studio Code（以下：VSCode）」を使っています。動作が軽く色々な機能も追加できるのに、無料で利用できる最強のコードエディターアプリです。
今回は、この VSCode で「要素」を別の新しい HTML タグ（新しい要素）で簡単に囲む方法について書いていきます。
便利ですし意外とよく使うので、ぜひ覚えて使いこなして下さい！
欲しい機能は標準実装されている
<span>タグが3個あります。これらすべてをサクッと<div>で囲んでみましょう。
<span>をすべて選択して、「ショートカットキー（※設定方法は後述）」を押します。
- 入力欄が出るので、囲みたい「HTML タグ」を Emmet 方式で書きます。
- すべての
<span>を、mirapaクラスを持つ<div>で囲むことができました。
欲しかった機能は VSCode に標準で実装されています。拡張機能が必要ないのはありがたいですね。
しかし、問題なのは「機能」はあるけど「ショートカットキー」が割り当てられていないということ。
ショートカットキーを使いたい場合は、自分で割り当てる必要があります。その手順を次項で見ていきましょう。
ショートカットキーを割り当てる
「要素を新しいタグで囲む」機能に、自分が使いやすい「ショートカットキー」を新しく割り当ててみましょう。
- ウィンドウ左下（アクティビティバー）にある「（管理）」をクリック。
- 「キーボードショートカット」をクリック。
- 「検索」に
emmet wrapと入力します。
- 「Emmet: ラップ変換」コマンドの左端にある「（キーバインドの追加）」アイコンをクリック。
- 割り当てたいショートカットキー（今回は Ctrl + Shift + G キー）を押して、Enter キーを押します。（ショートカットキーが他の機能と競合している場合はこちらの方法で解決する）
- ショートカットキーを割り当てることができました。
- これで、ショートカットキーを使用して……
- 簡単に「要素」を新しい「タグ」で囲めるようになりました。
コメント