VSCodeでbrタグを自動入力する

戻る

を楽に入力したい！

ウェブページ上で改行を行うには、HTMLタグ   を使用する必要があります。

しかし改行の使用頻度は多いので、毎回キーボードから   を入力するのは面倒です。

VScode なら、HTMLを編集している時に   タグを簡単に入力する設定を行えます。

ここではショートカットキー Ctrl+Enter で   タグが入力できるよう、VScode を設定します。

設定方法

F1 または Ctrl+Shift+P キーを押してコマンドパレットを開きます。
出現した入力欄に keyboard と入力して機能を検索します。
検索候補に出てきた「基本設定: キーボードショットカットを開く（JSON）」をクリックして選択します。
keybindings.json ファイルが開きます。おそらく最初から以下のように書かれていることでしょう。
```
// 既定値を上書きするには、このファイル内にキー バインドを挿入します
[
]
```

上記の [ と ] の間に空行を追加して割り込んで、以下のように追記します。
オレンジ色に塗られている範囲が追加する内容です。コピー＆貼付けでの入力が推奨です。

// 既定値を上書きするには、このファイル内にキー バインドを挿入します
[
{
  "key": "ctrl+enter",
  // Ctrl + Enter を押したときに適用
  "command": "type",
  "args": {
    "text": "<br>"
    // <br> タグを挿入
  },
  "when": "editorTextFocus && editorLangId == 'html'"
}
]

Ctrl+S キーを押して上書き保存します。続けて Ctrl+W キーを押して keybindings.json を閉じます。

以降、HTMLを開いて編集中に Ctrl+Enter キーを押すと   タグを入力できるようになります。

便利になりましたね！

戻る

目次

VSCodeでbrタグを自動入力する

<br>を楽に入力したい！

設定方法