DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 963,864 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
adro.codes
adro.codes

Posted on

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

Top comments (0)

Visualizing Promises and Async/Await 🀯

async await

☝️ Check out this all-time classic DEV post