在日常开发中，随着代码量的增加，如何高效地浏览和编辑代码成为一个重要问题。VSCode 提供了强大的代码折叠功能，可以帮助我们快速聚焦关键代码，隐藏不必要的细节。本文将围绕 代码折叠的常用快捷键 和 自定义折叠区域 展开，帮助你掌握这些提升开发效率的技巧。
1. 代码折叠的常用快捷键
VSCode 提供了多种快捷键来快速折叠和展开代码块。以下是几个常用的组合：
1.1 折叠/展开单个代码块
- 展开代码块：
Cmd + Shift + [（Mac）或Ctrl + Shift + [（Windows/Linux）。 - 折叠代码块：
Cmd + Shift + ]（Mac）或Ctrl + Shift + ]（Windows/Linux）。
使用场景：当你需要快速隐藏或显示某个函数、类或循环时，可以使用这些快捷键。
示例：
function example() {
console.log("这是一个示例函数");
}- 将光标放在函数内部，按下
Cmd + Shift + ]即可折叠该函数。
1.2 折叠/展开所有代码块
- 展开所有代码块：
Cmd + K Cmd + J（Mac）或Ctrl + K Ctrl + J（Windows/Linux）。 - 折叠所有代码块：
Cmd + K Cmd + 0（Mac）或Ctrl + K Ctrl + 0（Windows/Linux）。
使用场景：当你需要快速浏览整个文件的整体结构时，可以先折叠所有代码块，然后根据需要逐步展开。
示例：
class Example {
method1() {
console.log("方法 1");
}
method2() {
console.log("方法 2");
}
}- 按下
Cmd + K Cmd + 0可以折叠整个类及其方法。
1.3 折叠特定层级的代码块
- 折叠第 N 层级：
Cmd + K Cmd + N（Mac）或Ctrl + K Ctrl + N（Windows/Linux），其中N是层级数字（如 1、2、3）。
使用场景：当你需要折叠特定层级的代码（如只折叠函数内部的代码）时，可以使用这些快捷键。
示例：
function outerFunction() {
function innerFunction() {
console.log("内部函数");
}
console.log("外部函数");
}- 按下
Cmd + K Cmd + 1会折叠第一层级（outerFunction）。 - 按下
Cmd + K Cmd + 2会折叠第二层级（innerFunction）。
1.4 折叠除当前选定项以外的所有项
- 快捷键：
Cmd + K Cmd + -（Mac）或Ctrl + K Ctrl + -（Windows/Linux）。
使用场景：当你需要聚焦于当前选定的代码块，同时隐藏其他所有代码时，可以使用这个快捷键。
示例：
function functionA() {
console.log("函数 A");
}
function functionB() {
console.log("函数 B");
}
function functionC() {
console.log("函数 C");
}- 将光标放在
functionB内部，按下Cmd + K Cmd + -，functionA和functionC会被折叠，只有functionB保持展开。
1.5 切换当前光标所在区域的展开/折叠状态
- 快捷键：
Cmd + K Cmd + L（Mac）或Ctrl + K Ctrl + L（Windows/Linux）。
使用场景：当你需要快速切换当前光标所在代码块的展开或折叠状态时，可以使用这个快捷键。
示例：
function example() {
console.log("这是一个示例函数");
}- 将光标放在
example函数内部，按下Cmd + K Cmd + L，如果函数是展开的，则会折叠；如果函数是折叠的，则会展开。
1.6 递归切换展开/折叠状态
- 快捷键：
Cmd + K Cmd + Shift + L（Mac）或Ctrl + K Ctrl + Shift + L（Windows/Linux）。
使用场景：当你需要递归地切换当前光标所在区域及其所有子区域的展开或折叠状态时，可以使用这个快捷键。
示例：
function outerFunction() {
function innerFunction() {
console.log("内部函数");
}
console.log("外部函数");
}- 将光标放在
outerFunction内部，按下Cmd + K Cmd + Shift + L，如果outerFunction是展开的，则会递归折叠其所有子区域（如innerFunction）；如果outerFunction是折叠的，则会递归展开其所有子区域。
2. 自定义折叠区域：#region 的用法
在某些情况下，你可能希望将一些相关的代码块组织在一起，并能够快速折叠或展开。VSCode 支持通过 #region 和 #endregion 注释来定义自定义折叠区域。
2.1 定义自定义折叠区域
- 使用
// #region 描述和// #endregion包裹需要折叠的代码块。
示例：
// #region 工具函数
function helper1() {
console.log("工具函数 1");
}
function helper2() {
console.log("工具函数 2");
}
// #endregion2.2 折叠/展开自定义区域
- 点击
#region左侧的折叠箭头即可折叠或展开该区域。 - 你也可以使用快捷键
Cmd + Shift + [或Cmd + Shift + ]来操作。
使用场景：
- 将相关的工具函数、配置项或测试代码组织在一起。
- 在大型文件中快速隐藏不相关的代码，专注于当前任务。
3. 实际应用场景
3.1 快速浏览大型文件
在阅读或编辑大型文件时，使用 折叠所有代码块（Cmd + K Cmd + 0）可以快速查看文件结构，然后根据需要逐步展开。
3.2 聚焦关键代码
在调试或优化代码时，使用 折叠单个代码块 或 自定义折叠区域 可以隐藏不相关的代码，专注于当前任务。
3.3 组织代码逻辑
通过 #region 将相关的代码块组织在一起，可以提高代码的可读性和可维护性。
3.4 聚焦当前任务
使用 折叠除当前选定项以外的所有项（Cmd + K Cmd + -）可以快速隐藏其他代码，专注于当前选定的代码块。
3.5 快速切换代码块状态
使用 切换当前光标所在区域的展开/折叠状态（Cmd + K Cmd + L）可以快速切换代码块的展开或折叠状态，方便查看或隐藏代码细节。
3.6 递归切换代码块状态
使用 递归切换展开/折叠状态（Cmd + K Cmd + Shift + L）可以递归地切换当前光标所在区域及其所有子区域的展开或折叠状态，适合处理嵌套代码块。
4. 总结
VSCode 的代码折叠功能是提升开发效率的利器。通过掌握以下技巧，你可以更高效地浏览和编辑代码：
- 快捷键：
- 折叠/展开单个代码块：
Cmd + Shift + [/Cmd + Shift + ] - 折叠/展开所有代码块：
Cmd + K Cmd + 0/Cmd + K Cmd + J - 折叠特定层级：
Cmd + K Cmd + N - 折叠除当前选定项以外的所有项：
Cmd + K Cmd + - - 切换当前光标所在区域的展开/折叠状态：
Cmd + K Cmd + L - 递归切换展开/折叠状态：
Cmd + K Cmd + Shift + L
- 折叠/展开单个代码块：
- 自定义折叠区域：使用
#region和#endregion组织代码。
希望这篇博客能帮助你更好地利用 VSCode 的代码折叠功能！如果你有其他技巧或问题，欢迎在评论区分享和讨论。
相关资源：
Happy Coding！🚀
Comments NOTHING