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

Visual Studio Codeには一般的なアプリケーションで使える「タブ機能」とは別に「ペイン(Pane)分割機能」があります。
コーディングをしていると複数ファイルを編集することがほとんどです。
これらの機能をうまく活用すれば複数ファイルの編集もかなりラクになります。
タブ機能
Visual Studio Codeでタブが生成されるのは下記のパターンがあります。
- command + Nで新規ファイルを作成した場合
- Finderから別ファイルを開いた場合
- 未保存の状態で別ファイルを開いた場合(保存されてある状態だと同じタブで切り替えになります)
- shiftを押しながら別ファイルを開いた場合
タブができたらshift + command + [で左タブに移動、shift + command + ]で右タブに移動できます。

タブを閉じたい場合は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 + 矢印キーで、矢印の方向にペイン単位の移動ができます(マウスクリックでもフォーカスは変更可能)。

ペイン分割と切り替えがすばやくできるようになると、複数ファイルの編集がかなり早くできるようになります。
非常に基本的な操作ですが、普段からよく使うアプリなので最低限のショートカットキーは覚えておくのがオススメです。
command + 数字キーでペインの移動
業務ハッカーのTD(@tadakozo)さんに、command + 数字キーでペインの移動ができるとTwitterで教えていただきました。
これ、ペインの移動ってやっぱ 「cmd + K」スタートのやつがいいのん?? 「cmd + 数字キー」のほうが使いやすい気もしてたりで(´・ω・`)
— TD (@tadakozo) November 2, 2022
このショートカットキーの存在自体忘れていたのですが、command + 1で1つ目のペイン、command + 2で2つ目のペインという風に数字によって対象のペインに移動できます。
また、ペイン分割していない状態でcommand + 2を実行すると分割されるので、移動だけでなく分割にも使えます。
こちらの方がショートカットキーも短く済みますね。

サーバーのアップロードファイルの最大容量の確認と変更方法
Google Chromeでinput要素の補完機能を使うと背景に色がついてしまう問題
疑似クラスの:hoverと:activeのスマホでの挙動の違い
iOS Safariで指定したフォントサイズにならない場合の対処法
CSSのカスタムプロパティ(変数機能)の使い方
Vue.jsを使う人が最低限導入しておきたいVisual Studio Codeの拡張機能
さくらのレンタルサーバで.htaccessが原因で500エラーになってしまう場合のチェックリスト
Google Maps APIでピンのアクティブ時にピン画像を変える方法
AirPodsで片耳を外しても再生が止まらないようにする方法
MacのKeynoteにハイライトされた状態でコードを貼り付ける方法
iTerm2でマウスやトラックパッドの操作を設定できる環境設定の「Pointer」タブ
DeepLで「インターネット接続に問題があります」と表示されて翻訳できないときに確認すること
Ulyssesの「第2のエディタ」表示を使って2つのシートを横並びに表示する
Mac向けのミニマルでお洒落なデザインのGitクライアント「Gitfox」
Stationで複数のGoogleアカウントでGoogle Driveを使用する方法
Chrome拡張機能の「1Password」と「1Password X」の違いはなに?どちらを使えばいいの?
WordPressでコンタクトフォームを設置したいならこれ!!Contact Form 7のインストール方法
Macの圧縮・解凍アプリケーションまとめ
macOSのシステム環境設定「言語と地域」の設定見直し
SourceTreeでURLからクローンするときに自動で入力される「保存先のパス」を変更する方法
Alfred 4のカスタム検索を設定をしてサイト内検索をしたり、ブラウザのブックマーク検索を行う方法
Google日本語入力のRomaji tableを設定して、ローマ字入力する感覚で絵文字を表示させる方法
Figmaのコメント機能を利用してデザイン上のやり取りを円滑にする