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.

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.

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.

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

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 through comments below, or on Twitter at @pelu_carol.

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.