Using VSCode regions to better organize your code

Developers love to write clean code. It helps us to extend our application in the future, make it easier to maintain, and simple feels satisfying once we write clean code. It should be noted that going for the cleanest is not always the best decision.

When I started learning React, I heard from others that a file can only hold one component. All components get their own file. Following this advice, at first it felt great. I had a bunch of files and it was easy to find which component I was working with.

Then as the application grew larger, I had hundreds of files, some of them only being 10 lines. I also started using Styled Components, which made it so any styling suddenly received it's own file.

This turned into a nightmare. To define a simple button I had at least two files. Larger components could have up to 20 files just for it. Navigating was becoming a burden. So I took back on my advice for one component per file. I still divide components up by files, but if I am building a small button for a specific component, I will divide them into separate components but one file.

When I started doing this, it felt great. I was no longer navigating between files, but just within one. This is when I discovered VSCode regions.

I could easily divide sections of my file with a description and just fold them when not working on them!

// #region PROP TYPES
SuperCoolComponent.propTypes = {
  message: PropTypes.string.isRequired,
}
// #endregion

Then I can simply fold it :)

This has worked for me for large files to better organize my code and make it easier to navigate.

Let me know what you think! Tweet me @bstncartwright 😃.