Search
View Details

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?

Frontend Masters logo

Frontend Masters is the best place to grow in your career as a developer. We have courses on all the most important front-end technologies and beyond, from React to CSS, to backend with Node.js and Full Stack.

Leave a Reply

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

Frontend Masters ❤️ Open Source

Did you know? Frontend Masters Donates to open source projects. $313,806 contributed to date.