在Visual Studio Code中折叠/隐藏代码段的方法

技术背景

在编写代码时，面对较长的文件，代码折叠功能可以帮助开发者隐藏不关注的代码部分，提高代码的可读性和编辑效率。Visual Studio Code（以下简称VSCode）从特定版本开始支持代码折叠功能，并提供了多种方式来实现代码的折叠和展开。

实现步骤

1. 使用快捷键

从VSCode版本0.10.11开始，折叠功能已被推出并实现，以下是一些常用的快捷键：

• 折叠当前光标所在的最内层未折叠区域：
  • Windows和Linux：Ctrl + Shift + [
  • macOS：⌥ + ⌘ + [
• 展开当前光标所在的折叠区域：
  • Windows和Linux：Ctrl + Shift + ]
  • macOS：⌥ + ⌘ + ]
• 折叠编辑器中的所有区域：
  • Windows和Linux：Ctrl + K, Ctrl + 0（零）
  • macOS：⌘ + K, ⌘ + 0（零）
• 展开编辑器中的所有区域：
  • Windows和Linux：Ctrl + K, Ctrl + J
  • macOS：⌘ + K, ⌘ + J

2. 使用区域注释

从VSCode v1.17开始支持按区域进行代码折叠，不同语言的区域注释格式如下：

// JavaScript/TypeScript
//#region REGION_NAME
...code here
//#endregion

// C#
#region
...code here
#endregion

// C/C++
#pragma region
...code here
#pragma endregion

3. 创建手动折叠范围

从Insiders v1.70版本开始，可以折叠任意选定的代码行：

• 创建手动折叠范围：Create Manual Folding Range from Selection 命令，绑定快捷键 Ctrl + K Ctrl + ,
• 移除手动折叠范围：Remove Manual Folding Ranges 命令，绑定快捷键 Ctrl + K Ctrl + .

4. 调整设置

如果希望始终显示折叠控制按钮，可以在 settings.json 中添加以下设置：

{
    "editor.showFoldingControls": "always",
    "editor.folding": true,
    "editor.foldingStrategy": "indentation" 
}

若要移除折叠按钮，可添加 "editor.folding": false 到 settings.json 文件中。如果编辑大文件，可适当增加 editor.foldingMaximumRegions 的值：

{
    "editor.foldingMaximumRegions": 10000
}

5. 修改快捷键

如果默认快捷键不适用，可以在 keybindings.json 中进行修改。例如，将折叠所有区域的快捷键修改为 cmd + k cmd + m：

{
    "key": "cmd+k cmd+m",
    "command": "editor.foldAll",
    "when": "editorFocus"
}

核心代码

自定义快捷键示例

{
    "key": "ctrl+alt+]",
    "command": "editor.fold",
    "when": "editorTextFocus && foldingEnabled"
},
{
    "key": "ctrl+alt+[",
    "command": "editor.unfold",
    "when": "editorTextFocus && foldingEnabled"
},
{
    "key": "ctrl+shift+alt+]",
    "command": "editor.foldRecursively",
    "when": "editorTextFocus && foldingEnabled"
},
{
    "key": "ctrl+shift+alt+[",
    "command": "editor.unfoldRecursively",
    "when": "editorTextFocus && foldingEnabled"
},
{
    "key": "ctrl+k ctrl+[",
    "command": "editor.unfoldAll",
    "when": "editorTextFocus && foldingEnabled"
},
{
    "key": "ctrl+k ctrl+]",
    "command": "editor.foldAll",
    "when": "editorTextFocus && foldingEnabled"
}

修改Vim扩展快捷键冲突

{
    "vim.handleKeys": {
        "<C-k>": false
    }
}

最佳实践

• 提高代码可读性：对于较长的函数或代码块，使用区域注释进行折叠，只在需要查看时展开。
• 自定义快捷键：根据个人习惯修改快捷键，提高操作效率。
• 扩展使用：安装 Fold Level 等扩展，实现一键折叠到指定层级。

常见问题

快捷键失效

如果快捷键不起作用，可能是因为VSCode扩展或用户设置修改了键盘绑定。可以通过以下方法解决：

• 打开命令面板（Ctrl + Shift + P），输入 fold 查看可用的折叠命令。
• 若Vim扩展覆盖了 Ctrl + K 快捷键，可在 settings.json 中添加 "vim.handleKeys": { "<C-k>": false }。

区域折叠不生效

确保使用的区域注释格式正确，并且VSCode版本支持该语言的区域折叠。如果仍然无法折叠，可尝试更新VSCode或检查相关扩展。

折叠按钮不显示

在 settings.json 中添加 "editor.showFoldingControls": "always" 以始终显示折叠控制按钮。