技術メモ |
VS Code で HTML などを書く際に、選択範囲を指定するタグでかんたんに囲む方法
Visual Studio Code (VS Code), 技術・開発
わたしは、このサイトに手をいれる際に、エディタとして Cursor を使っています。
※ Cursor は実質 VS Code なので、便宜上この記事では VS Code というていで話を進めていきます
HTML や React を書くとき、なにかをなにかのタグで囲みたい事がよくあると思います。
手作業で入力すると、カーソルの移動が多く、記号の入力を伴う開始タグ・閉じタグの入力が必要であり、面倒で煩雑な作業となります。
この記事のポイント
- Emmet を使うと選択範囲を簡単に任意のタグで囲めます
- Emmet は HTML などを素早く編集できるもの
- Emmet は VS Code に内蔵されている
- 必要に応じて、囲む機能にキーボードショートカットを割り当てると良い
Emmet を使うと簡単に選択範囲を任意のタグで囲める
結論から言うと、この作業、Emmet を使うと少し簡単に行うことが出来ます。
Emmet とは
Emmet とは以前は Zen Coding と呼ばれていたテキストエディタ用のプラグインで、HTML / CSS / XML などを素早く編集できるものです。
Emmet は VS Code に内蔵されており、使用する際に特別なエクステンションをインストールする必要なく使用することが出来ます。
実際の手順
- タグで囲いたい文字列を選択する
Command + Shift + pでコマンドパレットを開くEmmet: ラップ変換 (Wrap with Abbribiation)を選択する- 出てきた入力用ウィンドウに、囲むのに使用するタグを入力する（例:
p） - 確定すると、選択した文字列が入力したタグで囲われる（例:
<p>選択した文字</p>）
頻繁に使用するならキーボードショートカットを割り当てると吉
頻繁にこの機能を使用する場合、
- コマンドパレットを開き
- 機能を選択する
という 2 つの動作が煩わしく思えると思います。
そういうときはこの機能に対してキーボードショートカットを割り当てると幸せになれると思います。
わたしは、いいショートカットを思いつかないので、一旦保留中です。
まとめ
この機能に限らず、HTML や React などタグが頻出するような言語を書く場合、Emmet は非常に便利です。
使い方を覚えるのは少し面倒ですが、うまく活用できれば開発効率を上げられると思うので、少しづつ活用していこうと思います。
参考にしたサイト
関連サイト
- Emmet Documentation - 公式ドキュメント
- Emmet in Visual Studio Code
- Emmet - Wikipedia - Wikipedia ページ
