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

VSCodeの折りたたみ機能は、コードを選択してCtrl＋Shift＋[（展開はCtrl＋Shift＋]）で使えます。
この記事では、折りたたみに関するショートカットキーの一覧に加えて、折りたたみアイコンの表示方法などsettings.jsonでの設定方法もまとめています。

折りたたみとは

折りたたみ機能は、大量のコードがある場合に特定のセクションを非表示にすることで、コードの見通しを良くする機能です。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 + .

Mac版は「Ctrl」を「⌘」に置き換えます。

折りたたみに関する設定（settings.json）

ショートカットキーとは別に、折りたたみの表示・挙動そのものはsettings.jsonから設定できます。設定を開く（Ctrl+,）か、settings.jsonに直接以下のように記述します。

折りたたみアイコンの表示タイミングを変更する

デフォルトでは行にカーソルを合わせた時だけ折りたたみアイコン（∨マーク）が表示されますが、常に表示させたり、非表示にすることもできます。

"editor.showFoldingControls": "always" // "always" | "never" | "mouseover"（既定値）

折りたたみ機能そのものをオフにする

"editor.folding": false

折りたたみの判定方法を変更する

言語ごとの構文解析ではなく、インデントの深さだけで折りたたみ範囲を判定させたい場合は以下を設定します。

"editor.foldingStrategy": "indentation" // "auto"（既定値） | "indentation"

折りたたみに関するFAQ

Q1: VSCodeでコードを折りたたむ方法は何ですか？

A: VSCodeでは、Ctrl + Shift + [を使用して選択した範囲のコードを折りたたむことができます。また、Ctrl + K, Ctrl + 0を使用すると、全てのコードを一度に折りたたむことができます。

Q2: 折りたたんだコードを再度表示するにはどうすればいいですか？

A: 折りたたんだコードを再度表示するには、Ctrl + Shift + ]を使用します。これにより、折りたたまれていたコードが再度表示されます。

Q3: 任意の箇所でコードを折りたたむことは可能ですか？

A: はい、VSCode 1.70のアップデート以降、任意の箇所でコードを折りたたむことが可能になりました。折りたたみたい範囲を選択し、Ctrl + K Ctrl+,を入力すると、選択した範囲が折りたたまれます。

Q4: 折りたたみ設定を削除するにはどうすればいいですか？

A: 折りたたみ設定を削除したい場合は、折りたたんだ範囲を選択し、Ctrl + K Ctrl+.を入力します。これにより、折りたたみ設定が削除されます。

Q5: 折りたたみ機能はどのような場面で役立ちますか？

A: 折りたたみ機能は、大量のコードを効率的に管理するための強力なツールです。特に、長いJSONやYAMLなどのファイルを読んで調査する際や、ログファイルを読んで調査する際に、特定の範囲を折りたたむことで必要な情報により早く辿り着くことができます。

以上が、VSCodeの折りたたみ機能に関するFAQです。これらの情報が、VSCodeの折りたたみ機能をより効果的に使用するための参考になれば幸いです。

関連動画

まとめ

VSCodeの折りたたみ機能は、大量のコードを効率的に管理するための強力なツールです。この記事を通じて、VSCodeの折りたたみ機能に関連するショートカットキーを理解し、活用することで、より効率的なコーディングが可能になることを願っています。

VSCodeのショートカットの練習

下記のSTARTボタンをクリックするとVSCodeのショートカットの練習ができます。ここで繰り返し練習をすることで無意識にショートカットキーが扱えるようになれるように作ってあります。ぜひお試しください。