# Visual Studio Codeで複数ファイルを編集するときにタブやペインの操作方法

URL: https://webrandum.net/vscode-tab-pane/
公開日: 2022-11-02
更新日: 2022-11-03
カテゴリー: コーディング
タグ: Visual Studio Code
出典: Webrandum（著者: サイトウ マサカズ）

Visual Studio Codeには一般的なアプリケーションで使える「タブ機能」とは別に「ペイン（Pane）分割機能」があります。

コーディングをしていると複数ファイルを編集することがほとんどです。

これらの機能をうまく活用すれば複数ファイルの編集もかなりラクになります。

## タブ機能

Visual Studio Codeでタブが生成されるのは下記のパターンがあります。

- command + Nで新規ファイルを作成した場合

- Finderから別ファイルを開いた場合

- 未保存の状態で別ファイルを開いた場合（保存されてある状態だと同じタブで切り替えになります）

- shiftを押しながら別ファイルを開いた場合

タブができたらshift + command + [で左タブに移動、shift + command + ]で右タブに移動できます。

![Visual Studio Codeのタブ](https://webrandum.net/mskz/wp-content/uploads/2022/11/image_1-1.png)

タブを閉じたい場合はcommand + Wで、間違えて閉じてしまった場合にタブを戻したい場合はshift + command + Tで復活します。

これらのショートカットキーは、一般的な他アプリケーションと同じなので、あまり苦労することなく覚えられると思います。

## ペイン分割

複数のファイルをウインドウに並べて表示することを「ペイン分割」と呼びます。

Visual Studio Codeのメニューバーの［表示］→［エディターレイアウト］の中から選択して分割するか、もしくはタブをドラッグして分割したい位置で離すと分割できます。

![［表示］→［エディターレイアウト］](https://webrandum.net/mskz/wp-content/uploads/2022/11/image_3.png)

分割したあとはshift + command + [とshift + command + ]でタブも含めて移動ができますし、もしくはcommand + Kを押したあとにcommand + 矢印キーで、矢印の方向にペイン単位の移動ができます（マウスクリックでもフォーカスは変更可能）。

![ペイン分割](https://webrandum.net/mskz/wp-content/uploads/2022/11/image_2.png)

ペイン分割と切り替えがすばやくできるようになると、複数ファイルの編集がかなり早くできるようになります。

非常に基本的な操作ですが、普段からよく使うアプリなので最低限のショートカットキーは覚えておくのがオススメです。

### command + 数字キーでペインの移動

業務ハッカーのTD（[@tadakozo](https://twitter.com/tadakozo)）さんに、command + 数字キーでペインの移動ができるとTwitterで教えていただきました。

> これ、ペインの移動ってやっぱ 「cmd + K」スタートのやつがいいのん？？ 「cmd + 数字キー」のほうが使いやすい気もしてたりで(´･ω･`)
> — TD (@tadakozo) November 2, 2022

このショートカットキーの存在自体忘れていたのですが、command + 1で1つ目のペイン、command + 2で2つ目のペインという風に数字によって対象のペインに移動できます。

また、ペイン分割していない状態でcommand + 2を実行すると分割されるので、移動だけでなく分割にも使えます。

こちらの方がショートカットキーも短く済みますね。