VS Codeでコードがさらに見やすくなる！行の折りたたみをより使いやすくする機能拡張 -Better Folding

Post on:2023年4月5日

sponsors

VS Codeには標準機能として、行の折りたたみができます。すこし使い勝手が悪かったのであまり使用していなかったのですが、折りたたみをより使いやすくする機能拡張をインストールしてみたら、便利だったので紹介します。

折りたたみ機能は、VS Codeで行エリアをホバーすると折りたたみ可能な箇所に下向きの矢印が表示されます。

Better Foldingの特徴

Better FoldingはVisual Studio Codeの機能拡張で、折りたたみ機能で求められるすべての機能を一つにまとめた拡張機能です。

VS Code標準の折りたたみ機能をより使いやすくします。
左はVS Code標準の折りたたみ、右はBetter Foldingの折りたたみ。

閉じブラケットも折りたたみます。

折りたたまれた行数を表示します。

折りたたまれたブラケットを表示します。

ほかにも、#regionのディスクリプションのみを表示したり、閉じタグの折りたたみ（HTMLも対応予定）、オブジェクトのプレビューを表示したりできます。Better Foldingの設定でそれぞれ必要な機能のみオンにすることもできます。

Better Foldingの設定

Better Foldingのインストールは、VS Codeの通常の機能拡張と同じです。
Visual Studio Marketplaceからインストールします。

「Install」ボタンをクリックすると、「Visual Studio Codeを開きますか？」とダイアログが表示されるので、「開く」をクリックします。VS CodeでBetter Foldingが表示され「インストール」をクリックすると、インストールが完了です。

閉じタグが折りたたまれ、行数も表示されるのは、いいですね。

vue.js

CSSファイルも同様に折りたたみが機能します。

bootstrap-reboot.css