Code Folding in Visual Studio Code

Enhancing Code Readability with Code Folding

Code folding is a powerful feature in modern code editors that allows you to hide or collapse sections of code, improving readability and making it easier to navigate large files. Visual Studio Code (VS Code) provides robust code folding capabilities, letting you focus on the essential parts of your code while concealing implementation details. This tutorial will guide you through the various methods of code folding in VS Code, covering automatic folding, manual folding, and keyboard shortcuts.

Automatic Code Folding

VS Code automatically folds code based on language syntax. This typically includes functions, classes, loops, and conditional blocks. As you scroll through your code, these sections can be collapsed to provide a high-level overview. To reveal the collapsed code, simply click on the minus sign icon that appears next to the line number when you hover over the folding area.

Manual Code Folding

Beyond automatic folding, VS Code also allows you to manually define folding regions. This is particularly useful for languages where automatic folding might not be sufficient or for creating custom collapsible sections.

Using Region Directives

Many languages support region directives, which allow you to explicitly define foldable blocks of code. The specific directives vary depending on the language. Here are some common examples:

• C#: #region and #endregion
• Java, TypeScript, JavaScript: //#region and //#endregion or // #region and // #endregion
• C/C++: #pragma region and #pragma endregion
• Python: #region and #endregion
• PHP: #region and #endregion
• Markdown: <!-- #region --> and <!-- #endregion -->

When VS Code encounters these directives, it automatically recognizes them as folding regions.

Creating Manual Folding Ranges

If your language doesn’t support region directives, or you need more fine-grained control, you can create manual folding ranges directly within the editor. VS Code allows you to select any arbitrary lines of code and designate them as a foldable range.

1. Select the lines of code you want to fold.
2. Use the command palette (Ctrl+Shift+P or Cmd+Shift+P) and search for "Create Manual Folding Range from Selection".
3. Execute the command to create a foldable range.

To remove a manual folding range, select the folded region and use the command palette to search for “Remove Manual Folding Ranges”.

Keyboard Shortcuts

VS Code provides several keyboard shortcuts for efficient code folding. Here’s a breakdown:

• Fold All (Collapse Everything):
  • Windows/Linux: Ctrl + K, Ctrl + 0 (zero)
  • macOS: Cmd + K, Cmd + 0 (zero)
• Unfold All (Expand Everything):
  • Windows/Linux: Ctrl + K, Ctrl + J
  • macOS: Cmd + K, Cmd + J
• Fold Region:
  • Windows/Linux: Ctrl + K, Ctrl + [
  • macOS: Cmd + K, Cmd + [
• Unfold Region:
  • Windows/Linux: Ctrl + K, Ctrl + ]
  • macOS: Cmd + K, Cmd + ]
• Fold Level 1 (Namespace): Ctrl + K, Ctrl + 1
• Fold Level 2 (Class): Ctrl + K, Ctrl + 2
• Fold Level 3 (Method): Ctrl + K, Ctrl + 3
• Fold Level 4 (Block): Ctrl + K, Ctrl + 4
• Fold Current Block: Ctrl + K, Ctrl + [ or ]