0

0

VSCode中的代码折叠与展开技巧

P粉986688829

P粉986688829

发布时间:2025-12-26 13:20:02

|

241人浏览过

|

来源于php中文网

原创

VSCode提供五种代码折叠方式:侧边栏控件、快捷键逐级控制、命令面板操作、自定义#region标记及设置调整。支持macOS快捷键Option+Cmd+[ / ],可折叠函数、类、注释块等,提升大型文件浏览效率。

vscode中的代码折叠与展开技巧

如果您在使用 VSCode 编辑大型源文件时感到代码结构难以快速浏览,可能是因为未充分利用其内置的代码折叠功能。以下是几种高效控制代码折叠与展开的操作方式:

本文运行环境:MacBook Air,macOS Sequoia。

一、使用编辑器侧边栏折叠控件

VSCode 在代码行号左侧提供了可视化的折叠控件,点击即可对当前代码块进行折叠或展开,适用于快速定位和临时收起不相关逻辑。

1、将光标置于某段可折叠区域(如函数、类、if 块、对象字面量等)的第一行。

2、观察行号左侧出现的小三角形图标,点击该图标即可切换折叠/展开状态

3、若需折叠整个文件所有可折叠区域,按住 Option 键(macOS)并点击任意一个折叠图标

二、通过快捷键批量控制折叠层级

VSCode 提供了基于作用域层级的快捷键组合,允许用户按嵌套深度逐级折叠或展开,特别适合处理多层嵌套结构。

1、将光标置于任意位置后,按下 Option + Cmd + [ 折叠当前最内层可折叠区域。

2、重复执行该快捷键,可逐级向外折叠更高层级(如函数 → 类 → 文件顶层块)。

3、按下 Option + Cmd + ] 可反向逐级展开已折叠的区域。

三、使用命令面板执行折叠操作

命令面板提供统一入口访问所有折叠相关指令,支持模糊搜索,适合不熟悉快捷键或需精确控制折叠范围的场景。

1、按下 Cmd + Shift + P 打开命令面板。

启科网络PHP商城系统
启科网络PHP商城系统

启科网络商城系统由启科网络技术开发团队完全自主开发,使用国内最流行高效的PHP程序语言,并用小巧的MySql作为数据库服务器,并且使用Smarty引擎来分离网站程序与前端设计代码,让建立的网站可以自由制作个性化的页面。 系统使用标签作为数据调用格式,网站前台开发人员只要简单学习系统标签功能和使用方法,将标签设置在制作的HTML模板中进行对网站数据、内容、信息等的调用,即可建设出美观、个性的网站。

下载

2、输入关键词 "Toggle Fold",选择“Editor: Toggle Fold”执行当前光标所在区域的折叠切换。

3、输入 "Fold All" 并执行,可一次性折叠文件中所有可折叠区域。

四、自定义折叠区域标记

对于非标准语法结构(如大段注释、配置块、Markdown 文档节),可通过特殊注释标记定义手动折叠区域,增强组织灵活性。

1、在希望折叠的代码块起始处添加 // #region 标签名

2、在对应结束位置添加 // #endregion

3、保存文件后,VSCode 会自动识别该区域为可折叠块,支持与原生折叠一致的所有操作

五、调整折叠行为设置

VSCode 允许用户修改默认折叠策略,例如禁用特定语言的自动折叠、启用基于缩进的折叠等,以适配个人编码习惯。

1、打开设置界面,搜索关键词 "folding"

2、找到 “Editor: Folding Strategy”,将其值由默认的 “auto” 改为 "indentation" 可启用缩进驱动折叠。

3、勾选 “Editor: Fold Enabled” 确保折叠功能处于激活状态,取消勾选将完全禁用所有折叠UI元素

相关专题

更多
if什么意思
if什么意思

if的意思是“如果”的条件。它是一个用于引导条件语句的关键词,用于根据特定条件的真假情况来执行不同的代码块。本专题提供if什么意思的相关文章,供大家免费阅读。

703

2023.08.22

vscode
vscode

VS Code(Visual Studio Code)是一款免费、开源的跨平台代码编辑器,由微软开发和维护。它被广泛用于软件开发和编程,支持多种编程语言和框架。VS Code 同时提供了丰富的功能和扩展性,使开发者可以高效地编写、编辑和调试代码。

576

2023.06.30

vscode怎么运行代码
vscode怎么运行代码

vscode是一个运行于MacOS X、Windows和Linux之上的,针对于编写现代Web和云应用的跨平台源代码编辑器;vscode免费而且功能强大,对JavaScript和NodeJS的支持非常好,自带很多功能,例如代码格式化,代码智能提示补全、Emmet插件等。php中文网给大家带来了相关的教程以及文章,欢迎大家前来阅读学习。

219

2023.07.21

vscode使用的框架介绍
vscode使用的框架介绍

VSCode是一款跨平台代码编辑器,它基于Electron框架和Monaco Editor构建。想了解更多vscode的相关内容,可以阅读本专题下面的文章。

384

2024.03.14

vscode一般用来写什么语言
vscode一般用来写什么语言

VSCode是一款功能强大的代码编辑器,支持多种编程语言和文件格式。它内置对 JavaScript、Python、Java、C++、TypeScript、HTML/CSS、Go 等语言的支持。想了解更多vscode的相关内容,可以阅读本专题下面的文章。

372

2024.03.14

vscode可以写什么语言
vscode可以写什么语言

vscode是一款强大的代码编辑器,支持多种编程语言的开发。通过安装扩展,可以为 JavaScript/TypeScript、Python、Java、C#、PHP、Go、Ruby、Rust、HTML/CSS 等语言提供智能代码补全、调试和格式化等功能。想了解更多vscode的相关内容,可以阅读本专题下面的文章。

538

2024.03.15

vscode中文设置方法
vscode中文设置方法

方法一:在设置页面中,搜索“locale”,并选择“zh-cn”。方法二:按“Ctrl Shift P”快捷键,输入“Configure Display Language”,将语言修改为“zh-cn”。如果上述方法无效,可考虑安装中文插件。想了解更多vscode的相关内容,可以阅读本专题下面的文章。

540

2024.03.15

vscode用途介绍
vscode用途介绍

Visual Studio Code(VSCode)是一款由 Microsoft 开发的多功能文本编辑器,适用于各种编程语言。作为一款开源软件,VSCode 拥有代码高亮、自动补全、调试、Git 集成等强大功能,成为程序员不可或缺的工具。想了解更多vscode的相关内容,可以阅读本专题下面的文章。

439

2024.03.15

虚拟号码教程汇总
虚拟号码教程汇总

本专题整合了虚拟号码接收验证码相关教程,阅读下面的文章了解更多详细操作。

25

2025.12.25

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
go语言零基础开发内容管理系统
go语言零基础开发内容管理系统

共34课时 | 2.5万人学习

第二十三期_前端开发
第二十三期_前端开发

共98课时 | 7.2万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号