VS Code define a #region

just show me

Visual Studio Code is definitely one of my favourite code editors and I use it all the time. Recently I stumbled upon the #region keyword. Using this you are able to wrap a section of code that will be collapsed together. This makes organising code a lot easier and allows you to focus on the functionality you're writing and ignore everything else.

Folding Guide

Example time

I will be showing off how to do this in JavaScript, but it is available in quite a very languages. See the guide above.

function add(a, b) {
  return a + b
}

function minus(a, b) {
  return a - b
}

function multiply(a, b) {
  return a * b
}

function divide(a, b) {
  return a / b
}

Without folding, the best you can do, in terms of folding, is the following;

function add(a, b) {...
}

function minus(a, b) {...
}

function multiply(a, b) {...
}

function divide(a, b) {...
}

Not bad but if you add appropriate jsdoc blocks the functions still take up a decent footprint. With regions, you are able to do the following;

// #region Math functions
function add(a, b) {
  return a + b
}

function minus(a, b) {
  return a - b
}

function multiply(a, b) {
  return a * b
}

function divide(a, b) {
  return a / b
}
// #endregion

Now you are able to collapse the code at the // #region definition, collapsing the code down to;

// #region Math functions ...

Documentation

Stay safe out there ❤️

Comments

[Mohammad Jawad (Kasir) Barati]

Not working in Dockerfiles unfortunately :sad: and I believe it is thanks to how we can write comments in Dockerfiles, so the same goes for yaml files and bash script files

[Mark Allen]

have you tried the maptz.regionfolder extension ? marketplace.visualstudio.com/items...

[Okinea Dev]

Thanks for the clear explanation!

[JayawardanaJTH]

Thanks

[rahulto]

nice