VSCodeでラップ変換

戻る

VSCode で HTMLを編集している際に「この文章全部pタグで囲みたいな…」や「この要素全部divで囲みたいな…」などを思ったことはありませんか？

何らかの文章

これを

<p>何らかの文章</p>

こうしたい。

ところがいざ文章の先頭にカーソルを移動して <p> を入力すると、自動的に </p> が挿入されて、次のようになってしまいます。

<p></p>何らかの文章

その悩みを解決してくれる機能がラップ変換です！
選択範囲を任意のタグで囲ってくれるEmmetの機能です！

ラップ変換を行う場合は、以下のような流れになります。

1. タグで囲いたい文字列を選択します。
2. Ctrl + Shift + P キーを押してコマンドパレットを開き、wrap と入力してラップ変換を検索し、見つかったものをクリックします。
3. 囲いたいタグを入力します。たとえば p と入力すると、<p>～</p> で囲われます。
4. Enter キーを押すと作業完了です。

しかし毎回この操作を行うのは面倒です……。😫

というわけで、ラップ変換を起動するためのショートカットキーを設定して使いやすくしましょう。

1. 「ファイル」メニュー →「ユーザー設定」→「キーボードショートカット」を選択し、ショートカットキーの設定画面を開きます。
2. 検索欄に wrap と入力し、ラップ変換を検索し、見つかったものをダブルクリックします。
3. ショートカットキーの入力画面が開くので、設定したいショートカットキーを押します。
   例えば Alt+W など。
4. Enter キーを押すと設定が完了します。
   もし設定をキャンセルしたい場合は ESC キーを押します。

これで設定は完了です。
設定画面を✕ボタンで閉じます。

今入力したキーがショートカットキーとして登録され、次回以降、指定のキーを押すだけでラップ変換が起動するようになります。

一度ショートカットキーを設定しておけば、以下の３ステップでタグで囲うことができます。

1. 囲みたいところを選択します。
2. ショートカットキー（Alt+W）を入力します。
3. 囲みたいタグを入力して Enter キーを押します。
   たとえば p など。

便利ですね！

戻る