Region Folding in VS Code

VS Code has code folding already, of course. Almost any logical bit of code is foldable. A CSS ruleset, a JavaScript function, a nested bit of JSON, any HTML element with children, etc.

But if you want to make a custom section of code foldable, you can wrap in special code comments like this:

/* #region */
/* #endregion */Code language: CSS (css)

Those are valid comments in CSS and JavaScript, but not all languages, so the syntax tends to follow whatever normal comments are in that language. HTML is:

<!-- #region -->
<!-- #endregion -->Code language: HTML, XML (xml)

You can also put extra text after those keywords if it’s helpful to have their name be visible after you’ve folded, like <!-- #region FooterStuff -->.

Need front-end development training?

Leave a Reply

Your email address will not be published. Required fields are marked *

Did you know?

Frontend Masters Donates to open source projects. $313,806 contributed to date.