VS Code define a #region

hurricaneinteractive

adro.codes

Posted on May 13, 2020

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
}
Enter fullscreen mode Exit fullscreen mode

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) {...
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

// #region Math functions ...
Enter fullscreen mode Exit fullscreen mode

Documentation

Stay safe out there ❤️

💖 💪 🙅 🚩
hurricaneinteractive
adro.codes

Posted on May 13, 2020

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

VS Code define a #region
vscode VS Code define a #region

May 13, 2020