【VSCode】選択範囲を囲んでHTMLタグを追加する方法|Emmetのショートカット設定

Windows・Macなどで利用できる無料ソースコードエディタのVisual Studio Code(以下、VSCodeと表記)では、Emmetと呼ばれるテキストエディタ用プラグインをデフォルトの状態で利用できます。

今回はそのEmmetのショートカットを利用し、HTMLコード内で選択している範囲を囲んでタグを追加する方法となります。

【VSCode】選択範囲を囲んでHTMLタグを追加する方法

まずは、選択範囲を囲んでHTMLタグを追加できるショートカットを設定します。

ショートカットキーを設定

  1. VSCodeの画面左下にある歯車アイコンをクリックし、表示されるメニューから「キーボードショートカット」を選択します。
    VSCodeの画面左下にある歯車アイコンを選択した状態の画像
    画面左下にある歯車アイコンを選択した状態
     
  2. 「キーボードショートカット」画面上部の検索ボックスで、「editor.emmet.action.wrapWithAbbreviation」を検索します。
    「キーボードショートカット」画面内の上部の画像
    「キーボードショートカット」画面内の上部にある検索ボックス
  3. コマンド「editor.emmet.action.wrapWithAbbreviation」が表示されるので、ダブルクリックします。
  4. 入力ボックスが表示されるので、任意のショートカットキーを入力しEnterキーを押します。

以上が、選択範囲を囲んでHTMLタグを追加できるショートカットキーを設定する手順となります。

また、ショートカットキーの設定方法の詳細は以下のリンク先を参考にしてみてください。

選択範囲を囲んでHTMLタグを追加する方法

上記を設定後に、以下の方法で選択範囲を囲んでHTMLタグを追加できます。

  1. 囲みたい範囲を選択し、設定したショートカットキーを入力します。
    VSCodeでテキストを選択した状態の画像
  2. 画面上部に入力ボックスが表示されるので、Emmetの入力方法で囲みたいタグを入力して「Enter」を押します。
    画面上部に表示された入力ボックス
    例ではpタグで囲むためpを入力

それにより、以下のように選択した範囲を囲んでHTMLタグを追加できます。

選択範囲を囲んでHTMLタグを追加した例の画像
例では選択した範囲をpタグで囲んでいます。

行ごとにタグを追加する場合

以下のように、選択範囲に対して行ごとにタグを追加する場合は、入力ボックスに タグ名*(アスタリスク)を入力して「Enter」を押します。例では p* を入力しています。

Emmetの基本的な入力方法などは以下のリンク先を参考にしてみてください。

コメント投稿コメント投稿欄を開く

コメントは、項目欄(*は必須項目)を入力し、「コメントを送信」ボタンをクリックしてください。 (メールアドレスは公開されることはありません。コメントの公開は承認制となります。)

Twitterで返信する場合はこちらから。