VSCodeの折りたたみのショートカットキーまとめ

2023 7/16

2023-07-16

この記事では、Visual Studio Code（VSCode）の折りたたみ機能に関連するショートカットキーをまとめています。VSCodeの折りたたみ機能は、コードの可読性を高めるための重要なツールです。この記事を通じて、VSCodeの折りたたみ機能を効率的に使用するためのショートカットキーを習得し、コーディング作業をよりスムーズに進めることができるようになることを目指します。

折りたたみとは

折りたたみ機能は、大量のコードがある場合に特定のセクションを非表示にすることで、コードの見通しを良くする機能です。VSCodeでは、この折りたたみ機能を利用することで、大きなコードベースでも必要な部分だけに焦点を当てて作業を進めることができます。

任意の箇所でコードを折りたたむ

例えば以下のようなコードがあり、4,5,6行目を折りたたみたいとします。

1: function helloWorld() {
2:   if (true) {
3:     console.log("Hello, world!");
4:     console.log("This is a test function.");
5:     console.log("This is another test function.");
6:   }
7: }

手順としては折りたたみたい範囲（ここでは4,5,6行目）を選択し、Ctrl + K Ctrl+, を入力します。（macOS は Ctrl の代わりに Cmd）

すると、以下のように選択した範囲が折りたたまれます。

1: function helloWorld() {
2:   if (true) {
3:     console.log("Hello, world!");
4:     // 3 lines folded
7: }

折りたたみ設定を削除する

折りたたみ設定を削除したい場合は、折りたたんだ範囲を選択し、Ctrl + K Ctrl+. を入力します。

折りたたみのショートカットキー

ショートカットキーを使用することで、マウス操作を減らし、より効率的にコードの折りたたみを行うことができます。以下に、VSCodeで使用できる主要な折りたたみに関するショートカットキーをまとめました。

操作	ショートカットキー
折りたたむ	`Ctrl + Shift + [`
展開する	`Ctrl + Shift + ]`
全て折りたたむ	`Ctrl + K, Ctrl + 0`
全て展開する	`Ctrl + K, Ctrl + J`
再帰的に折りたたむ	`Ctrl + K, Ctrl + [`
再帰的に展開する	`Ctrl + K, Ctrl + ]`
折り畳み／展開のトグル	`Ctrl + K, Ctrl + L`
レベル1で折りたたむ	`Ctrl + K, Ctrl + 1`
すべての領域（region）の折りたたみ	`Ctrl + K, Ctrl + 8`
すべての領域（region）の展開	`Ctrl + K, Ctrl + 9`
すべてのブロックコメントの折りたたみ	`Ctrl + K, Ctrl + /`
選択範囲から折りたたみ範囲を作成する	`Ctrl + K, Ctrl + ,`
手動折りたたみ範囲を削除する	`Ctrl + K, Ctrl + .`