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 ❤️