No More Mistakes With VSCode Expand-And-Collapse Options

Written by bob.js | Published 2020/09/27
Tech Story Tags: web-development | coding | programming | microsoft | vscode | software-development | productivity | ide | web-monetization

TLDR Folding has been rolled out and is now implemented since Visual Studio Code version 0.10.11. Folding folds the innermost uncollapsed region, while Unfold unfolds the collapsed region at the cursor. This is a personal documentation of this process for that point in time when I need this useful information again. WARNING: Watch out for the ZERO key listed, it is not an "O" key. It is meant to be pressed while the other key is held down.via the TL;DR App

I recently had a large amount of data to refactor out of HTML and into JSON. The details about how I achieved this is a whole different article. What I want to document for myself (and maybe others will find it useful, even if it's only a refresher) are the various code expand and collapse options.
Rather than doing things the easy way and combing through the VS Code documentation, I did a search on Stack Overflow and found the following ...
And, while this looked exactly like what I was looking for, I found that even a simple answer can have its own complications.

Terminology

It is not called Collapse and Expand, rather Folding.
Folding has been rolled out and is now implemented since Visual Studio Code version 0.10.11. There are these keyboard shortcuts available:
Fold folds the innermost uncollapsed region, while Unfold unfolds the collapsed region at the cursor.
On Windows and Linux ...
  • Fold Keys:
    Ctrl + Shift + [
  • Unfold Keys:
    Ctrl + Shift + ]
On MacOS ...
  • Fold Keys:
    ⌥ + ⌘ + [
  • Unfold Keys:
    ⌥ + ⌘ + ]
Fold All folds all regions, while Unfold All unfolds all regions in the editor:
On Windows and Linux ...
  • Fold Keys:
    Ctrl + (K => 0)
    (zero)
  • Unfold Keys:
    Ctrl + (K => J)
On MacOS ...
  • Fold Keys:
    ⌘ + (K => 0)
    (zero)
  • Unfold Keys:
    ⌘ + (K => J)
    
NOTE: Watch out for the ZERO listed, it is not an "O" key. Additionally, The
K => 0
and
K => J
are meant to be pressed while the
Ctrl
and
are held down. I kept releasing the
Ctrl
key before pressing the second key while caused some heartache.
As I said before, this is a personal documentation of this process for that point in time when I need this useful information again.

Written by bob.js | REAL, FUN, GEEK who is passionate about Front-End!
Published by HackerNoon on 2020/09/27