ちょっと話題の記事

VS Code 1.70 で任意の個所でコードを折りたためるようになりました

2022.08.05

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

CX 事業本部 Delivery 部 MAD グループのふじいです。先月は色々と忙しくブログが書けませんでしたが「今月は書くぞ!」と思っているところに VS Code のアップデートが来たので新機能を紹介します。

そんなわけで VS Code 1.70 がリリースされました?。 8月ですが July 2022 Update です。

任意の箇所でコードを折りたためるようになりました

今までは括弧で囲まれたブロックや Python のようなインデントで表されたブロックだと行番号とコードの間に ﹀ のような記号が現れ、それをクリックするとコードを折りたたむことができました。

今までは折りたためる箇所は決まっていましたが、今回の VS Code 1.70 のアップデートにより任意の個所でコードを折りたためるようになりました

(例が適切ではありませんが)例えば以下のようなコードがあり、4,5,6を折りたたみたいとします。

手順としては折りたたみたい範囲を選択し、Ctrl + K Ctrl+, を入力します。(macOS は Ctrl の代わりに Cmd

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

それぞれカンマとピリオドでショートカットキーは異なりますので注意してください。

またこれらはショートカットキー以外にもコマンドが用意されています。

https://code.visualstudio.com/updates/v1_70#_fold-selection

役に立ちそうな場面

長い JSON や YAML など折りたためて嬉しい場面はいくつかあると思いますが、私が最初に思ったことは「ログ調査捗りそう」でした。

ログファイルは時系列ごとに情報が大量に吐き出され行数が長くなってしまいます。 そういったファイルを読んで調査する際に「ここからここは問題ないから折りたたもう」「やっぱりさっきのところに必要な情報が書かれてそうだから折りたたみ解除しよう」とかなんやかんやして必要な情報に辿り着く場面もあるのかなと思いました。

おまけ

VS Code 1.69 から使えるようになって 1.70 で簡単に有効化できるようになったコマンドセンターもよろしく!

https://code.visualstudio.com/updates/v1_69#_command-center