ともすたmedia

2025.08.21

VSCodeのタブとウィンドウアレンジで使いやすい画面レイアウトをしよう

記事を共有:

  • X
  • クリップボードにコピー

Visual Studio Code(VS Code)は、ウィンドウ内にタブやパネルが配置されて、さまざまな作業を1つのウィンドウ内で完結できるのが特徴です。ここでは、そんなタブやパネル、ウィンドウなどの配置などについて詳しく紹介していきましょう。

VS Codeのタブを使いこなそう

VS Codeでファイルを開くと、画面上部に「タブ」が開いて複数のファイルを同時に編集できるようになります。

ただし、エクスプローラーパネルでファイルをクリックしてタブを開いた場合、他のファイルを開くと消えてしまいます。これは、「プレビューモード」でタブが開いているため。ファイル名が、斜体で表示されていることが分かります。

開いたままにしたい場合は、ファイルをダブルクリックで開くか、プレビューモードで開いたファイルを編集すると、通常のタブに戻ります。

プレビューモードを無効にする

このプレビューモードが使い慣れない場合は、エディターの右端の「その他の操作」をクリックし、「プレビューエディターを有効にする」のチェックをはずすと、通常のクリックでタブが開きっぱなしになります。便利な方で設定しましょう。

タブを並び替えよう

大量のファイルを開いて、タブが画面幅に収まりきらなくなると、横スクロールバーが表示されるようになります。

なお、タブの一覧はエクスプローラーパネル内の「開いているエディター」というグループでも確認することができます。数が増えた場合はこちらの方が便利でしょう。

表示されていない場合は、エクスプローラーパネル右上のメニューボタンから表示することができます。

なお、タブの順番は入れ替えることができるので、入れ替えたいタブをドラッグして好きな場所に移動しましょう。

タブを閉じる

タブを閉じる場合は、タブ自体の右側にある「閉じる」ボタンをクリックして閉じます。また、まとめて閉じたい場合は右クリックすると、次のようなメニューから閉じることができます。

  • 閉じる:自身のタブを閉じます
  • その他を閉じる:自身のタブ以外のすべてのタブを閉じます
  • 右側を閉じる:自身のタブより右側のタブをすべて閉じます
  • 保存済みを閉じる:編集中で保存されているファイル以外をすべて閉じます
  • すべて閉じる:開いているタブをすべて閉じます

タブをピン留めする

常に編集しているファイルなどの場合は、「ピン留め」をすることで閉じないようにすることができます。対象のタブを右クリックして「ピン留めする」メニューをクリックしましょう。

すると、一番左側に移動してピンのアイコンが表示されます。

このピンのアイコンをクリックすると、ピン留めを解除することができます。なお、ユニークな操作としてピン留めしていないタブを、ピン留めしているタブの左側にドラッグすると、そのタブをピン留めできます。

逆に、ピン留めしているタブをピン留めしていないタブの右側に移動すると、ピン留めを解除することができます。必要に応じて使っていきましょう。

二段階ショートカット

この「ピン留めをする・外す」のメニューですが、キーボードショートカットが割り当てられていますが、「Cmd(Ctrl)+K Shift+Enter」というショートカットになっています。

これは、二段階のキーボードショートカットで、最初に「Cmd+K(Ctrl+K)」を押します。すると、画面の左下に待機中の表記が表示されます。

この表記は数秒間表示されるので、その間に2番目のキーの組み合わせを押すと発動します。

エディターの分割

VSCodeは、ウィンドウ内で複数の「エディター」を分割して表示することができます。タブを開いたら、右端の「エディターを右に分割」ボタンをクリックしましょう。

すると、中央でエディタが2つに分かれて、それぞれで別のタブを開くことができるようになります。

分割を解除したい場合は、一方のタブをすべて閉じると解除されます。

さまざまな分割

分割は左右だけではなく、さまざまな形で分割することができます。例えば、先のボタンを「Option(Alt)」キーを押しながらクリックすると、「上下に分割」に切り替わります。

実際には、もっと簡単な方法があり、タブバーのタブをドラッグしてウィンドウ内の端の方に移動すると、反転するエリアの形が変化します。これが、分割後の位置や大きさを示しているので、好きな場所ではなすと、その部分で分割がされます。

また、メニューの「表示→エディターレイアウト」メニューからも、次のようなさまざまな形に分割できます。

  • シングル
  • 2列
  • 3列
  • 2行
  • 3行
  • グリッド(2×2)
  • 2行右
  • 2列下

例えば、「グリッド」を選択すると2列、2行のレイアウトになります。

グループの最大化

先のようにエディターを複数に分割した場合、編集するときに各エリアが小さすぎると感じた場合は、「最大化」することができます。

最大化したいグループの右端のメニューから「グループの最大化」メニューをクリックしましょう。

一時的に、そのグループだけが最大化され編集しやすくなります。右上に、最大化していることが示されているので、編集が終わったらこれをクリックして解除しましょう。

なお、似た機能でタブをダブルクリックすることでも、エリアを広げることができます。

Visual Studio Code + GitHub Copilotをちゃんと学ぶ講座 Udemyで販売中!

グループのロック

エディターを分割した状態で新しいファイルを開いた場合、「今編集しているエディター」にタブが追加されます。これを防ぎたい場合は、グループをロックすることができます。

ロックしたいエディターの右端のメニューから「グループをロックする」をクリックしましょう。

ロックアイコンが表示され、このグループに新しいタブが追加されないようになります。

グループ内分割

エディタの分割にはもうひとつ、「グループ内分割」があります。タブエリアを右クリックして「グループ内分割」メニューを選びましょう。

すると、グループ内でエディタが分割されます。タブエリアが1つしかないことが分かります。

これは、長文のソースコードなどの場合で、ファイルの先頭を参照しながら下の方を編集したいといった場合に、両方を表示した状態にすることなどができます。

Visual Studio Code + GitHub Copilotをちゃんと学ぶ講座 Udemyで販売中!

一覧に戻る