51
34

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

VS Codeで選択範囲をHTMLタグで囲むショートカットキーを設定する

Posted at

以下のようなことができるように設定する方法を書いていきます。
vscode_wrapper.gif
(この記事では VS Code Version: 1.44 を使っています。)

#ショートカットキーを設定する
まず File > Preferences > Keyboard Shortcutsを開きます。
KeyboardShortcuts.png
検索バーに emmet wrap と入力します。
search emmet2.png
表示された項目をダブルクリックし、それぞれに割り当てたいショートカットキーを設定します。
1番目に表示されているEmmet: Wrap Individual Lines with Abbreviationは、選択した範囲の各行をタグで囲むコマンドです。
2番目に表示されているEmmet: Wrap with Abbreviationは、選択した範囲全体を囲むコマンドです。
それぞれのコマンドの詳細はEmmetのドキュメントで読むことができます。

#ショートカットキーを使う

##選択範囲全体をタグで囲む
まずは使用頻度がより多いと思われるEmmet: Wrap with Abbreviationを使ってみます。
(冒頭のGIFとは逆の順番で説明します。)
タグで囲みたい範囲を選択して、Emmet: Wrap with Abbreviationに割り当てたショートカットキーを押すと、上に入力欄が表示されます。
short1.png
ここにタグ名を入力してEnterを押せば完了です。
short2.png

##選択範囲の各行をタグで囲む
次にEmmet: Wrap Individual Lines with Abbreviationを使ってみます。
各行をタグで囲みたい範囲を選択してEmmet: Wrap Individual Lines with Abbreviationに割り当てたショートカットキーを押すと、上に入力欄が表示されます。
short3.png
ここにタグ名を入力し、*を加えてEnterを押せば完了です。
short4.png

#備考
この記事はクリエイティブ・コモンズ 表示 4.0 国際 ライセンスの下に提供されています。
クリエイティブ・コモンズ・ライセンス

51
34
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
51
34

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?