はじめに
VS Codeではコードの折りたたみ/展開をするキーボードショートカットがいくつかあります。
この説明の中で「"レベル1"で折りたたみ」って何だ？と思ったので動作をまとめました。
準備
今回は以下のhtmlコードで確認します。
<html>
<body>
<table>
<tbody>
<tr>
<!-- #region -->
<td>
<div>
<p>
a
<!-- hoge
fuga
foo
-->
</p>
<!-- #endregion -->
</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>
<!-- ← ここに何もない行があります -->
折りたたみ Ctrl+Shift+[
カーソルをあわせている箇所が折りたたまれます。
カーソルをあわせていない箇所の折りたたみ状態はそのままとなります。
2行目にカーソルがある状態でCtrl+Shift+[を実行すると、結果は以下となります。
<html>
> <body>
</body>
</html>
2行目の折りたたみをクリックで解除すると、body内は折りたたまれていない状態で展開されます。
展開 Ctrl+Shift+]
カーソルをあわせている箇所が展開されます。
カーソルをあわせていない箇所の折りたたみ状態はそのままとなります。
2行目、4行目が折りたたまれている状態で2行目にカーソルをあわせてCtrl+Shift+]を実行すると、結果は以下となります。
<html>
<body>
<table>
> <tbody>
</tbody>
</table>
</body>
</html>
折り畳み／展開のトグル Ctrl+K Ctrl+L
カーソルをあわせている箇所の展開/折りたたみ状態がトグルします。
展開/折りたたみ時の動作はCtrl+Shift+]、Ctrl+Shift+[と同じです。
再帰的に折りたたみ Ctrl+K Ctrl+[
カーソルをあわせている部分、およびその内部にある折りたためる箇所をすべておりたたみます。
2行目にカーソルがある状態でCtrl+K Ctrl+[を実行すると、結果は以下となります。
<html>
> <body>
</body>
</html>
2行目の折りたたみをクリックで解除すると、tableが折りたたまれている状態で展開されます。
<html>
<body>
> <table>
</table>
</body>
</html>
再帰的に展開 Ctrl+K Ctrl+]
カーソルをあわせている部分、およびその内部にある展開できる箇所をすべて展開します。
2行目、4行目が折りたたまれている状態で2行目にカーソルをあわせてCtrl+Shift+]を実行すると、結果は以下となります。
<html>
<body>
<table>
<tbody>
<tr>
<!-- #region -->
<td>
<div>
<p>
a
<!-- hoge
fuga
foo
-->
</p>
<!-- #endregion -->
</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>
すべて折りたたみ Ctrl+K Ctrl+0
どこにカーソルを置いていても、折りたためる箇所をすべて折りたたみます。
Ctrl+K Ctrl+0を実行すると、結果は以下となります。
><html>
</html>
1行目の折りたたみをクリックで解除すると、bodyが折りたたまれている状態で展開されます。
<html>
> <body>
</body>
</html>
すべて展開 Ctrl+K Ctrl+J
どこにカーソルを置いていても、展開できる箇所をすべて展開します。
(結果は省略します)
レベル1で折りたたみ Ctrl+K Ctrl+1
さて、ここが気になっていた部分です。
「レベル1で折りたたむ」とは、一番浅い階層の折りたたみのみ折りたたむという動作です。
なお、折りたたみ部分の内部は折りたたみません。
htmlの一番下の行にカーソルをあわせてCtrl+K Ctrl+1を実行すると、結果は以下となります。
><html>
</html>
また、<html>内(1~23行目)のいずれかにカーソルがある状態でCtrl+K Ctrl+1を実行すると、折りたたみが実行されません。
カーソルがある部分が折りたたまれてしまう場合は、レベルによる折りたたみは実行されないようです。
例えば、1行目にカーソルがある状態でCtrl+K Ctrl+2を実行すると、折りたたみが実行されて以下の結果となります。
<html>
> <body>
</body>
</html>
一方で、1行目にカーソルがある状態でCtrl+K Ctrl+1を実行すると、コードは折りたたまれません。
使い道としては、関数がいくつも書いてあるコードで関数があるレベルで折りたたむと関数名のみ見えるようになるので、コードをざっと見ていく際にスクロール量を減らせる等があるかと思います。
すべての領域（region）の折りたたみ Ctrl+K Ctrl+8
各言語でコメントアウトした部分に「#region」「#endregion」と書くことができ、Ctrl+K Ctrl+8を実行するとregionで囲んだ部分が折りたたまれます。
region内の折りたたみ状態は変更されません。
<html>
<body>
<table>
<tbody>
<tr>
><!-- #region -->
</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>
すべての領域（region）の展開 Ctrl+K Ctrl+9
上記の逆で、region部分が展開されます。
region内の折りたたみ状態は変更されません。
すべてのブロックコメントの折りたたみ Ctrl+K Ctrl+/
各言語のブロックコメント部分が折りたたまれます。
Ctrl+K Ctrl+/を実行すると、結果は以下となります。
<html>
<body>
<table>
<tbody>
<tr>
<!-- #region -->
<td>
<div>
<p>
a
> <!-- hoge
</p>
<!-- #endregion -->
</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>
おわりに
VSCodeの折りたたみについてまとめました。
調べているうちに折りたたみのショートカットに慣れてきたのですが、最初よく分からなかったレベルnでの折りたたみが一番便利なように思いました。
逆に、regionはプロジェクトによっては余計なコメント扱いされることが多いように思うので、あまり使い所がないかもしれないですね...