VSCode 折叠代码

VSCode折叠代码,很多编程语言都使用花括号来包裹代码块。比如说类的定义、函数的定义、条件判断语句或者循环语句,它们都是用花括号作为一个代码块的开始和结尾。而VS Code 就是通过对花括号的匹配来决定哪些代码块是能够被折叠的。

首先,我们一起来看一下编辑器中最基础的代码折叠方式。比如在下面的这段 JavaScript 代码中:

function foo() {
bar("Hello World");
}

foo()

function bar(a) {

}

前三行里是一个foo的函数,并且这个函数当中只有一行内容。

当我们把鼠标移动到行号的附近时,就能够看到一个类似于减号的标记,同时鼠标指针变成了手的形状。

鼠标移动到行号附近
鼠标移动到行号附近

此时若我们单击这个图标,就能够看到 foo函数内部的这行代码消失了,取而代之的则是三个点的缩略图。

代码被折叠
代码被折叠

在代码被折叠后,行号附近的这个图标就变成了一个加号的形状,若再点击这个加号就能把这段代码展开。

折叠代码被展开

以上内容就是代码折叠最基本的概念,下面介绍下VSCode基于语言定义的代码折叠。

VSCode基于语言定义的代码折叠

上面讲述的代码折叠的判断方式,是通过花括号或者代码缩进的检测来实现的。但若遇到不使用花括号或者缩进不正确的代码时,可能就不能实现这样的操作了。为此,VS Code 给语言服务提供了一个接口,语言服务可以动态地检测代码,然后告诉 VS Code 哪段代码是可以被折叠的。

这样一来,VS Code 就不用傻傻地检查花括号的匹配了,并且我们写代码的时候也不用为了折叠而更改代码风格了。

除了让语言服务参与到代码折叠的定义当中来,VS Code 还给了用户一定的控制权。也就是说,我们可以通过在代码注释里书写特殊的关键词来申明,哪一行是可折叠代码的开始,哪一段则是这个可折叠代码块的结束。

举例子可能要比解释定义要来的容易一些,所以我们一起看下面的这段 Java 代码:

public class Main {
// region Main
public static void main(String[] args) {
}
// endregion
}

其中,// region Main 申明了一个可折叠代码块的开始,而// endregion则申明了这段可折叠代码的结束。当我们把鼠标指针移动到行号附近时,我们能够看到三个加号,说明这段代码包含了三个可折叠的代码块,两个是由花括号控制的,一个则是基于特殊的语言的定义。

通过对应的关键词来控制Java 代码的折叠

至于哪个语言可以使用哪些关键词来控制代码的折叠,还请参考 VS Code 的官方文档

下面我们再来一起看一下有哪些折叠和展开代码的快捷键。

VSCode折叠代码快捷键

赞(2)

猜你喜欢

    评论 抢沙发

    • 昵称 (必填)
    • 邮箱 (必填)
    • 网址
    VSCode 教程
    VSCode 是什么VSCode 入门VSCode 键盘操作VSCode 代码行编辑VSCode 撤销光标移动VSCode 行排序VSCode 合并代码行VSCode 调整字符大小写VSCode 调换字符的位置VSCode 代码缩进VSCode 代码格式化快捷键VSCode 添加代码注释VSCode 自动补全VSCode 文本选择VSCode 快速预览VSCode 参数预览VSCode 快速修复VSCode 重构VSCode 文本编辑VSCode 多光标VSCode 代码跳转和链接VSCode 悬停提示窗口VSCode 文件跳转VSCode 行跳转VSCode 符号跳转VSCode 定义和实现间跳转VSCode 跳转到引用的地方VSCode 代码片段VSCode 代码片段Tab StopVSCode 代码片段占位符VSCode 代码片段多光标VSCode 代码片段预设变量VSCode 折叠代码VSCode 折叠代码快捷键VSCode 面包屑VSCode 小地图VSCode 单文件搜索VSCode 单文件替换VSCode 多文件搜索和替换VSCode 显示相对行号和隐藏行号VSCode 行号背景VSCode 渲染出空格符和制表符VSCode 缩进参考线和垂直标尺VSCode 光标样式VSCode 工作台介绍VSCode 命令面板VSCode 如何管理文件和文件夹VSCode 资源管理器VSCode 多文件夹工作区VSCode 工作区切换VSCode 版本管理VSCode 创建终端VSCode 终端快捷键操作VSCode 终端面板里文件跳转VSCode 怎么运行代码VSCode 终端设置VSCode 任务系统配置 - 分组和结果显示VSCode 如何创建自定义的任务VSCode 如何使用自动任务检测VSCode 任务配置参数及任务结果分析VSCode 代码调试器VSCode 横向编辑器组和纵向编辑器组VSCode 编辑器 - TabVSCode 编辑器网格布局VSCode 编辑器拖拽 Drag & DropVSCode 编辑器专注模式VSCode 编辑器缩放VSCode 设置VSCode 快捷键绑定VSCode 支持JSONVSCode 支持MarkdownVSCode 支持JavaScriptVSCode 支持Node.jsVSCode 支持GoVSCode 支持JavaVSCode 支持PythonVSCode 支持C#VSCode 支持CSSVSCode 支持EmmetVSCode 支持DockerVSCode 固定 UI 视图VSCode 修改编辑器配色VSCode 修改主题配色VSCode 修改工作区配色VSCode 经典插件推荐
    VSCode 插件开发
    VSCode 插件架构VSCode 创建一个插件VSCode 运行插件VSCode 插件开发编辑器命令VSCode 插件开发自定义语言VSCode 插件开发装饰器VSCode 插件开发工作台VSCode 插件维护和发布