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を実行すると分割されるので、移動だけでなく分割にも使えます。
こちらの方がショートカットキーも短く済みますね。

JavaScriptのテンプレートリテラル内で条件分岐を行う方法
Vue Routerでページ遷移後にトーストを表示させる方法
さくらのレンタルサーバで.htaccessが原因で500エラーになってしまう場合のチェックリスト
WordPress5.5のサイトマップ機能を無効にする
「DevTools z-index」でz-indexがかかっている要素をChrome開発者ツールに一覧表示させる
効率的なマークアップが出来るようになるEmmetでCSSを書く時の基本
思考したり情報整理したい時はMarkdown記法で文章を書き出そう!!Webデザイナーの情報整理術
goenvを使って、MacにGo言語をインストールする
Visual Studio Codeの拡張機能「Trailing Spaces」でコードの中にある余計なスペースを表示する
PubSubHubbubを利用してWebサイトの更新をリアルタイムに通知しよう
iTerm2で「Use System Window Restoration Setting」を設定しているとアラートが表示されて機能しない
Google Chromeのサイト内検索(カスタム検索)機能を別のプロファイルに移行する方法
iPadで入力モードを切り替えずに数字や記号をすばやく入力する方法
iPhoneやiPadでYouTubeの再生速度を3倍速や4倍速にする方法
Keynoteで有効にしているはずのフォントが表示されない現象
MacのKeynoteにハイライトされた状態でコードを貼り付ける方法
AirPodsで片耳を外しても再生が止まらないようにする方法
iTerm2でマウスやトラックパッドの操作を設定できる環境設定の「Pointer」タブ
DeepLで「インターネット接続に問題があります」と表示されて翻訳できないときに確認すること
Ulyssesの「第2のエディタ」表示を使って2つのシートを横並びに表示する
マウス操作の完成度が高いウインドウリサイズアプリ「Magnet」
Macで複数ディスプレイを使っている場合に便利な設定集
AppCleanerでMacアプリを関連ファイルごと完全に削除する
操作に没頭できる!Firefox版 Arcのようなブラウザ「Zen Browser」
chezmoi(シェモア)で始めるdotfiles管理
GitHubの通知を見逃さない!通知に特化したアプリ「Gitify」
Keyboard Maestroの変数基礎
Neovimを使い始める最初の一歩として便利な「LazyVim」
ウェブサイトをmacOSアプリとしてラッピングする「Unite Pro」
Keyboard Maestroの「Macro Debugger」で複雑なマクロのデバッグを行う方法