VSCode: よく使うレイアウト(画面分割)を一発で呼び出す

この記事は約4分で読めます。
記事内に広告が含まれています

エディターレイアウトの設計図

こんにちは、さち です。

普段、ウェブサイトを作るときは「Visual Studio Code(以下:VSCode)」を使っています。動作が軽く色々な機能も追加できるのに、無料で利用できる最強のコードエディターアプリです。

今回は、この VSCode で、よく使う「エディターレイアウト画面分割)」を一発で呼び出せるようにしてみます。

スポンサーリンク

よく使うレイアウトを一発設定したい

私が VSCode でよく使う「エディターレイアウト(画面分割)」はこんな感じです。

エディターレイアウトの設計図

VSCode の標準機能だけでも実現はできるんですが、意外と手間がかかります。

下記の記事の Sublime Text のときのように、一発でこのレイアウト(画面分割)を呼び出せるようにしてみます。

Sublime Text 3:画面を変則的に分割する方法

自作のレイアウトをショートカット登録する

操作手順

  1. 左側のアクティビティバーにある「管理(歯車)」アイコンをクリックします。
    管理
  2. キーボードショートカット」をクリック。(ショートカットは Ctrl を押しながら K S の順にキーを押す)
    キーボードショートカット
  3. 右上にある「キーボードショートカットを開く(JSON)」アイコンをクリック。
    「キーボードショートカットを開く (JSON) 」ボタン
  4. 開いた「keybindings.json」に次のように追記します(一番外の {} の中に書く)。key は割り当てるショートカットキーです。今回は、Alt + 3(テンキー) キーにしました。完成したら「保存」しましょう。(記述方法の詳細は次項で書きます)
    {
      "key": "alt+numpad3",
      "command": "layoutEditorGroups",
      "args": {
        "orientation": 0,
        "groups": [
          { "size": 0.7, "groups": [ {}, {} ] },
          { "size": 0.3 },
        ]
      }
    },
  5. これで、設定したショートカットキー( 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 なので、水平方向に分割します。

Orientarion の意味

"groups"

名前のとおり「グループ」に分割します。

まずは、「orientation」で指定した方向で「0.70.3」の比率で分割。比率は "size" で指定します。(合計が「1」になるように比率を書く)
groups の意味

さらに、「0.7」の方に "groups" をネスト(入れ子)することで、「orientation」の指定とは違う方向でグループ内部を分割します。"size"記述しない場合は等分されるので、「0.50.5」で分割されます。
ネスト(入れ子)にした groups の効果

【おまけ】 一発で「1画面(シングル)」に戻す

自作の「エディターレイアウト(画面分割)」を一発で呼び出せるようになると、もとの「1画面(シングル)」にも一発で戻せるようにしたくなります。

初期設定では「シングル」にショートカットキーがないので、割り当ててみます。

  1. 左側のアクティビティバーにある「管理(歯車)」アイコンをクリックします。
    管理
  2. キーボードショートカット」をクリック。(ショートカットは Ctrl を押しながら K S キーの順に押す)
    キーボードショートカット
  3. 検索に view single と入力します。
    キーボードショートカットの画面
  4. 下に表示された項目「表示: 1列のエディターレイアウト」をダブルクリック。
    キーボードショートカットの画面
  5. 割り当てるショートカットキーを押します。今回は Alt + 1(テンキー) キーにしました。Enter キーを押して完了します。
    キーボードショートカットの画面
  6. エディターレイアウトの「シングル」に、ショートカットキー( Alt + 1(テンキー) )が割り当てられました。
    キーボードショートカットの画面

この操作をすると、指定したショートカットキーの内容が、自動的に「keybindings.json」に追記されます。

コメント

タイトルとURLをコピーしました