【VSCode】拡張機能無しでbrタグのショートカット追加

あらすじ

デザイン上のテキストをpタグなどにコピペして、それぞれの行にbrタグ入力して…ってやっていたけど流石にメンドすぎたので、ハックをGoogle.

white-space: pre-line; とかにしても良かったけど、開きタグの次は改行するっていうポリシーがあったのでやっぱやめた。

wpautop に慣れすぎるといけないな（でもやっぱり好きWordPress）

キーバインディングの追加

br タグショートカットといえども、機能的には「任意のキーを押したとき「<br>」という文字列を出力する」というモノなので、あしからず。

まずは「Ctrl + P」でコマンドパレットを開き

keyboard

と入力します。

そして、「基本設定: キーボード ショットカットを開く（JSON）」をクリックします。

すると、keybindings.json というJSON形式のユーザー用設定ファイルが表示されると思いますので、そちらに追記します。

公式ドキュメントより（というか以下のコードコピペでよいけど）

{
    "key": "ctrl+enter", 
    //Ctrl + Enterを押したとき macはCmdでも○
    "command": "type", 
    //argsの内容をもとに入力
    "args": {
        "text": "<br>" 
        //入力内容は<br> 改行タグ
    },
    "when": "editorTextFocus && editorLangId == 'html'" 
    //発動できるのはエディタ内がフォーカスされている && HTML形式のファイルを開いているときのみ
}

を追記します。

保存してCtrl + Enterを押してbrタグが入力されることを確認します。

めでたし！