VS Codeでコードがさらに見やすくなる! 行の折りたたみをより使いやすくする機能拡張 -Better Folding
Post on:2023年4月5日
VS Codeには標準機能として、行の折りたたみができます。すこし使い勝手が悪かったのであまり使用していなかったのですが、折りたたみをより使いやすくする機能拡張をインストールしてみたら、便利だったので紹介します。
折りたたみ機能は、VS Codeで行エリアをホバーすると折りたたみ可能な箇所に下向きの矢印が表示されます。
![VS Codeの行の折りたたみをより使いやすくする機能拡張 -Better Folding](http://coliss.com/wp-content/uploads-202302/2023040401@2x.png)
Better Foldingの特徴
Better FoldingはVisual Studio Codeの機能拡張で、折りたたみ機能で求められるすべての機能を一つにまとめた拡張機能です。
VS Code標準の折りたたみ機能をより使いやすくします。
左はVS Code標準の折りたたみ、右はBetter Foldingの折りたたみ。
![Better Foldingの特徴](http://coliss.com/wp-content/uploads-202302/2023040404-01@2x.png)
閉じブラケットも折りたたみます。
![Better Foldingの特徴](http://coliss.com/wp-content/uploads-202302/2023040404-02@2x.png)
折りたたまれた行数を表示します。
![Better Foldingの特徴](http://coliss.com/wp-content/uploads-202302/2023040404-03@2x.png)
折りたたまれたブラケットを表示します。
ほかにも、#region
のディスクリプションのみを表示したり、閉じタグの折りたたみ(HTMLも対応予定)、オブジェクトのプレビューを表示したりできます。Better Foldingの設定でそれぞれ必要な機能のみオンにすることもできます。
![Better Foldingの設定](http://coliss.com/wp-content/uploads-202302/2023040404@2x.png)
Better Foldingの設定
Better Foldingのインストール
Better Foldingのインストールは、VS Codeの通常の機能拡張と同じです。
Visual Studio Marketplaceからインストールします。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-202302/2023040402-01.png)
Better Folding -Visual Studio Marketplace
「Install」ボタンをクリックすると、「Visual Studio Codeを開きますか?」とダイアログが表示されるので、「開く」をクリックします。VS CodeでBetter Foldingが表示され「インストール」をクリックすると、インストールが完了です。
![VS Codeのキャプチャ](http://coliss.com/wp-content/uploads-202302/2023040402-02.png)
Better Foldingを使ってみた
閉じタグが折りたたまれ、行数も表示されるのは、いいですね。
![VS Codeのキャプチャ](http://coliss.com/wp-content/uploads-202302/2023040403-01@2x.gif)
vue.js
CSSファイルも同様に折りたたみが機能します。
![VS Codeのキャプチャ](http://coliss.com/wp-content/uploads-202302/2023040403-02@2x.gif)
bootstrap-reboot.css
sponsors