こんにちは、さち です。
普段、ウェブサイトを作るときは「Visual Studio Code（以下：VSCode）」を使っています。動作が軽く色々な機能も追加できるのに、無料で利用できる最強のコードエディターアプリです。
今回は、この VSCode で、「HTML」のペアとなる「タグ」に一発でジャンプする方法について書いていきます。
ペアの HTML タグにジャンプしたい
例えば上図のような状態を考えてみます。
<template> の開始タグの上に「カーソル」を合わせて特定の「キー」を押すと、ペア（対）となる終了タグの </template> にジャンプ。
逆に、終了タグの </template> の上で「キー」を押すと、開始タグの <template> にジャンプして欲しいです。
実現する方法
実は、ペアとなる「タグ」にジャンプする機能は、VSCode に標準で実装されています。
しかし、初期設定ではこの機能に「ショートカットキー」が設定されていません。設定していきましょう。
- ウィンドウ左下（アクティビティバー）にある「（管理）」をクリック。
- 「キーボードショートカット」をクリック。
- 「検索」に
editor.emmet.action.matchTagと入力。
- 表示された項目「Emmet: 一致するペアに移動」にキーバインド（ショートカットキー）を追加します。今回は Ctrl + P キーにしました。（ショートカットキーの競合を解消する方法はこちらの記事を参照）
- これで、「タグ」にカーソルを合わせた状態で「ショートカットキー（ Ctrl + P ）」を押すと、ペア（対）の「タグ」にジャンプしてくれます。
コメント