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

iOSシミュレーターを使ってWebサイトを開発者ツールを見ながら実機表示で開発する方法
iTerm2を使いこなすために覚えておきたいショートカット集
Dart Sassの変数の基本的な使い方|Dart Sass入門
npm install時に「cb() never called!」とエラーが表示されたときの解決法
SafariのURLメニュー部分も考慮できるCSSの単位「dvh」
ウェブ上でLaTeXで数式をキレイにプレビューするJavaScriptライブラリ「MathJax」
Local by FlywheelでWordPressのローカル開発環境構築のハードルが一気に下がる
CSSの読み込みで「its MIME type (‘text/html’) is not a supported stylesheet MIME type」エラーが表示されて読み込みができない場合の解決方法
JavaScriptのforEach内で「continue」や「break」のような動作をさせる方法
WordPressのカスタムメニューでは、内部リンクに対してカスタムリンクは使わない!
AirPodsで片耳を外しても再生が止まらないようにする方法
MacのKeynoteにハイライトされた状態でコードを貼り付ける方法
iTerm2でマウスやトラックパッドの操作を設定できる環境設定の「Pointer」タブ
DeepLで「インターネット接続に問題があります」と表示されて翻訳できないときに確認すること
Ulyssesの「第2のエディタ」表示を使って2つのシートを横並びに表示する
定番のパスワード管理ツール「1Password」を使ってパスワードの管理をする
AppCleanerでMacアプリを関連ファイルごと完全に削除する
Figmaでテキストをカーブに合わせて変形させるプラグイン「arc」
Figmaで細かいアニメーションを作成できるプラグイン「Motion」
Google Chromeでいま開いているページのQRコード生成方法
情報収集に最適!!RSSリーダー「Feedly」の登録から簡単な使い方まで
Figmaでチーム共有用のメモや注釈素材が使える「Annotation Kit 2.0」
ATOKで目的の単語にすぐ変換するための「辞書・学習」タブの設定項目
Sketchのプラグインを管理ツールを使わずに直接フォルダで管理する方法
Visual Studio Codeでできる最低限のGit操作方法