/ How to

How to Collapse and Condense All Code Blocks in VS Code Editor

Visual Studio Code (VS Code) provides several ways to collapse and condense code blocks to help you focus on specific parts of your code. These features are very useful when working with large files or codebases, allowing you to hide sections you are not actively working on.

Keyboard Shortcuts to Fold/Unfold Code

The fastest way to fold and unfold code blocks is by using keyboard shortcuts:

  • Fold (collapse) the code block at the cursor position
    • Windows/Linux: Ctrl + Shift + [
    • macOS: ⌘ + ⌥ + [
  • Unfold (expand) the code block at the cursor position
    • Windows/Linux: Ctrl + Shift + ]
    • macOS: ⌘ + ⌥ + ]
  • Fold All code blocks
    • Windows/Linux: Ctrl + K Ctrl + 0 (zero)
    • macOS: ⌘ + K ⌘ + 0
  • Unfold All code blocks
    • Windows/Linux: Ctrl + K Ctrl + J
    • macOS: ⌘ + K ⌘ + J

You can customize these keyboard shortcuts by going to File > Preferences > Keyboard Shortcuts.

Folding Code With the Mouse

You can also fold/unfold code blocks by clicking the arrows in the gutter to the left of the line numbers:

  • Click the arrow to fold/unfold the block at that line
  • Shift+Click the arrow to fold/unfold that block and all child blocks

image

Fold/unfold code by clicking the gutter arrows (image source: VS Code Docs)

Folding Strategies

By default, VS Code folds code based on indentation levels. You can change the folding strategy in the settings:

File > Preferences > Settings

"editor.foldingStrategy": "indentation"

Some languages also support syntax-aware folding:

"[javascript]": {
    "editor.foldingStrategy": "auto"
}

Folding Commands

You can also use the Command Palette to run folding commands:

  • Fold (collapse) the innermost uncollapsed region
  • Unfold (expand) the collapsed region
  • Fold All regions
  • Unfold All regions
  • Fold Level[1][2][3][4][5][6][7] folds code blocks to the specified level

Open the Command Palette with Ctrl+Shift+P and start typing the name of the command.

Collapsing Search Results

When you search across files, the results can take up a lot of space. You can condense them by clicking the collapse icon in the top right of the search view:

image

Collapsing the search results pane (image source: VS Code Docs)

Extension Recommendations

Here are some recommended extensions for improved code folding:

These extensions provide additional ways to condense and organize your code structure.

Conclusion

VS Code offers many built-in features and shortcuts to help condense your code into a more manageable view. By strategically folding blocks of code, you can focus on the relevant sections and prevent your files from becoming cluttered. Extensions like Code Outline and Fold Level also help with condensing code.

Mastering code folding takes your VS Code editing efficiency to the next level. Try out the different folding strategies and shortcuts covered in this article to dramatically simplify complex codebases. Let us know in the comments if you have any other favorite tips for condensing code!

Related Posts