Skip to content

VS Code Better Folding Extension

vscode better folding extension

VS Code isn’t that great when it comes to folded code blocks.

As you can see in the image below, it gets the job done but limits visibility and it’s difficult to understand what lies inside those blocks.

default vs code code blocks folded

Another downside is that it’s hard to customize it to your liking.

That’s why in this post we’re going to have a look at the Better Folding extension.

As the name suggests, this extension offers a more intuitive and customizable way to fold and unfold code blocks.

I’d suggest checking out the video below for a more explicit showcase:


Better Folding

If you cannot watch the video, here’s what folded code blocks look like using the extension.

vs code better folding extension code blocks folded

Better Folding supports most brackets-based languages such as JavaScript, TypeScript, PHP, Rust, C++, and more…

XML-based languages such as JSX and TSX are also supported.

HTML is not yet supported.

Customize your experience

If you want to customize your experience, click the cog icon and Extension Settings.

better folding extension cog icon settings

From there you can enable or disable certain extension features such as excluding certain languages.

better folding extension settings

Make sure to check the README section to get the latest update, and read the instructions, and the changelog.

Overall, the Better Folding extension is a valuable addition to VS Code for anyone looking to streamline their coding workflow and improve their productivity.

Happy coding 😊

Let me know what you think about this article in the comments section below.

If you find this article helpful, please share it with others and subscribe to the blog to support me, and receive a bi-monthly-ish e-mail notification on my latest articles.