こんにちは、さち です。
普段、ウェブサイトを作るときは「Visual Studio Code(以下:VSCode)」を使っています。動作が軽く色々な機能も追加できるのに、無料で利用できる最強のコードエディターアプリです。
今回は、この VSCode で、よく使う「エディターレイアウト(画面分割)」を一発で呼び出せるようにしてみます。
よく使うレイアウトを一発設定したい
私が VSCode でよく使う「エディターレイアウト(画面分割)」はこんな感じです。
VSCode の標準機能だけでも実現はできるんですが、意外と手間がかかります。
下記の記事の Sublime Text のときのように、一発でこのレイアウト(画面分割)を呼び出せるようにしてみます。
自作のレイアウトをショートカット登録する
操作手順
- 左側のアクティビティバーにある「管理(歯車)」アイコンをクリックします。
- 「キーボードショートカット」をクリック。(ショートカットは Ctrl を押しながら K S の順にキーを押す)
- 右上にある「キーボードショートカットを開く(JSON)」アイコンをクリック。
- 開いた「keybindings.json」に次のように追記します(一番外の
{
と}
の中に書く)。key
は割り当てるショートカットキーです。今回は、Alt + 3(テンキー) キーにしました。完成したら「保存」しましょう。(記述方法の詳細は次項で書きます){ "key": "alt+numpad3", "command": "layoutEditorGroups", "args": { "orientation": 0, "groups": [ { "size": 0.7, "groups": [ {}, {} ] }, { "size": 0.3 }, ] } },
- これで、設定したショートカットキー( Alt + 3(テンキー) )を押すだけで、エディターレイアウト(画面分割)を一発で呼び出せるようになりました。
「keybindings.json」の記述方法
別の形の「レイアウト(画面分割)」を登録したい人もいると思うので、「keybindings.json」での記述方法ついて解説します。
例として、前述の設定を詳しく見ていきましょう。( "command": "layoutEditorGroups",
は固定なので省略)
{ "key": "alt+numpad3", "command": "layoutEditorGroups", "args": { "orientation": 0, "groups": [ { "size": 0.7, "groups": [ {}, {} ] }, { "size": 0.3 }, ] } },
"key"
割り当てる「ショートカットキー」です。キーの名前を記述します。今回は "alt+numpad3"
なので、Alt + 3(テンキー) キーです。
"orientation"
一番外の「グループ」の分割方向を指定します。今回は "orientation": 0
なので、水平方向に分割します。
"groups"
名前のとおり「グループ」に分割します。
まずは、「orientation」で指定した方向で「0.7:0.3」の比率で分割。比率は "size"
で指定します。(合計が「1」になるように比率を書く)
さらに、「0.7」の方に "groups"
をネスト(入れ子)することで、「orientation」の指定とは違う方向でグループ内部を分割します。"size"
を記述しない場合は等分されるので、「0.5:0.5」で分割されます。
【おまけ】 一発で「1画面(シングル)」に戻す
自作の「エディターレイアウト(画面分割)」を一発で呼び出せるようになると、もとの「1画面(シングル)」にも一発で戻せるようにしたくなります。
初期設定では「シングル」にショートカットキーがないので、割り当ててみます。
- 左側のアクティビティバーにある「管理(歯車)」アイコンをクリックします。
- 「キーボードショートカット」をクリック。(ショートカットは Ctrl を押しながら K S キーの順に押す)
- 検索に
view single
と入力します。
- 下に表示された項目「表示: 1列のエディターレイアウト」をダブルクリック。
- 割り当てるショートカットキーを押します。今回は Alt + 1(テンキー) キーにしました。Enter キーを押して完了します。
- エディターレイアウトの「シングル」に、ショートカットキー( Alt + 1(テンキー) )が割り当てられました。
この操作をすると、指定したショートカットキーの内容が、自動的に「keybindings.json」に追記されます。
コメント