戻る

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

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

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

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

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

   // 既定値を上書きするには、このファイル内にキー バインドを挿入します
   [
   ]

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

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

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

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

便利になりましたね！

戻る