If you’re a developers, there may be times that you need to deal with complex JSON or HTML files. VSCode has automatic code blocks formatting built-in. You can quickly collapse any block of code using the little arrow in the left sidebar, right beside line numbers.
In this short article, we will present a few handy shortcuts to quickly collapse/expand code blocks in VSCode.
VSCode Collapse/expand
In VSCode terminology, the collapsible code blocks feature is called Fold/Unfold.
You can quickly fold a block of code, given that your cursor is placed inside of it by pressing Ctrl+Shift+[ keyboard combination. Similar to that, Ctrl+Shift+] key combination will unfold the collapsed region at the cursor.
Alternatively, one can use the Command Palette and type fold to do the same thing, although it will take more than one keyboard shortcut to complete
There are several advanced keyboard shortcut to fold/unfold code blocks in VSCode, although I personally don’t use them very often.
- Toggle Fold (Ctrl+K Ctrl+L) folds or unfolds the region at the cursor.
- Fold Recursively (Ctrl+K Ctrl+[) folds the innermost expanded region at the cursor and all regions inside that region.
- Unfold Recursively (Ctrl+K Ctrl+]) unfolds the region at the cursor and all regions inside that region.
- Fold All (Ctrl+K Ctrl+0) folds all regions in the editor.
- Unfold All (Ctrl+K Ctrl+J) unfolds all regions in the editor.
- Fold Level X (Ctrl+K Ctrl+2 for level 2) folds all regions of level X, except the region at the current cursor position.
- Fold All Block Comments (Ctrl+K Ctrl+/) folds all regions that start with a block comment token.
On macOS, you have to use use ⌘ key instead of Ctrl on each of the shortcut above.
Recursive Collapse or Expand in VSCode
Developers usually want to recursively collapse or expand a block of code can do that in VSCode by holding Shift key and Click in the arrow icon in the left sidebar. Any regions inside the block of code you’re interacting with will be collapsed if previously expanded and vice versa.
Advanced Collapse Settings
By default, the collapse icon in the sidebar are shown only when the mouse is moved over the sidebar gutter.
You can change that to always show the icon by editing VSCode settings.json and changed the editor.showFoldingControls setting to always. You can do that by accessing File > Preferences or press Ctrl + , key combination. Alternatively, open Command Palette and find Open Settings (JSON) to open settings.json.
// Controls when the folding controls on the gutter are shown.
"editor.showFoldingControls": "always",Code language: JavaScript (javascript)Collapse/expand feature works by detecting the language in the file, then apply appropriate settings created specifically for it, either indentation-based, or defined by contributed folding range providers.
In rare cases, VSCode cannot accurately detect the language you’re editing, so you won’t be able to fold your code.
You can try specifying the editor.foldingStrategy key in settings.json to overcome this problem.
"editor.foldingStrategy": "indentation", Code language: JavaScript (javascript)If you need to further fine-tune the folding feature in VSCode, you can install Explicit Folding by zokugun. The extension allows you to manually control how and where to collapse/expand your code, as well as advanced collapse rules.
There’s another cool extension you should check out if you regularly need to collapse your code blocks : Fold Level by vikyd. Basically, the extension provides a way to quickly assign keyboard shortcuts to multiple folding levels in VSCode.
We hope that the information above is useful to you. If you need more instructions on how to use VSCode, check out our post on how to enable/disable word wrap in VSCode, How to use LaTeX in VSCode or how to automatically indent your code in Visual Studio Code.
