0

0

VSCode中的代码折叠功能:让复杂代码更清晰

P粉986688829

P粉986688829

发布时间:2026-01-07 16:20:02

|

640人浏览过

|

来源于php中文网

原创

VSCode代码折叠功能可提升大型文件浏览效率:默认支持多语言结构折叠;提供Cmd+Shift+[等快捷键批量控制;支持#region自定义区域;可通过设置调整折叠策略;扩展可增强高级折叠能力。

vscode中的代码折叠功能:让复杂代码更清晰

如果您在使用 VSCode 编辑大型源文件时发现代码结构难以快速浏览,代码折叠功能可帮助您临时隐藏不相关的代码块,从而聚焦于当前逻辑区域。以下是启用与自定义代码折叠的具体操作方式:

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

一、启用默认代码折叠支持

VSCode 默认对多种语言的常见结构(如函数、类、条件块、循环等)提供原生折叠支持,无需额外插件即可使用。该功能依赖语言服务器提供的语法范围信息,确保折叠边界准确可靠。

1、打开任意支持折叠的语言文件(例如 .ts.py 文件)。

2、将光标置于某段可折叠代码行号左侧的空白区域,出现 图标时单击即可折叠或展开。

3、按住 Option 键(macOS)并点击折叠图标,可递归折叠其内部所有嵌套层级。

二、使用快捷键批量控制折叠状态

键盘操作能显著提升折叠效率,尤其适用于快速收起整个文件或逐级展开调试。所有快捷键均基于编辑器焦点触发,不依赖鼠标定位。

1、折叠当前光标所在区域:Cmd + Shift + [(macOS)。

2、展开当前光标所在区域:Cmd + Shift + ](macOS)。

3、折叠全部代码块:Cmd + K 后松开,再按 Cmd + 0

4、展开全部代码块:Cmd + K 后松开,再按 Cmd + J

三、自定义折叠区域(#region / #endregion)

对于不支持自动结构识别的语言(如 HTML、JSON),或需要手动划定逻辑分组的场景,可通过预设注释标记创建用户定义折叠区域。该方式兼容 TypeScript、JavaScript、C# 等主流语言。

1、在代码中插入开始标记:// #region 描述文字

ShoopD 网上商店系统
ShoopD 网上商店系统

用 php + mysql 驱动的在线商城系统,我们的目标为中国的中小企业及个人提供最简洁,最安全,最高效的在线商城解决方案,使用了自建的会员积分折扣功能,不同的会员组有不同的折扣,让您的商店吸引更多的后续客户。 系统自动加分处理功能,自动处理会员等级,免去人工处理的工作量,让您的商店运作起来更方便省事 采用了自建的直接模板技术,免去了模板解析时间,提高了代码利用效率 独立开发的购物车系统,使用最

下载

2、在对应位置插入结束标记:// #endregion

3、保存文件后,VSCode 将在开始标记左侧显示折叠控件,点击即可收起两标记之间的全部内容。

四、配置折叠行为以匹配开发习惯

VSCode 允许通过设置项调整折叠策略,例如禁用自动折叠导入语句、启用缩进级折叠等,使编辑器响应更符合个人工作流。

1、按下 Cmd + , 打开设置界面。

2、在搜索框中输入 folding,定位到 Editor: Folding Strategy 选项。

3、下拉选择 indentation 可启用基于缩进的通用折叠(适用于无语法支持的文件)。

4、勾选 Editor > Folding: Enabled 确保全局折叠功能处于激活状态。

五、安装扩展增强折叠能力

部分第三方扩展可在原生功能基础上补充高级特性,例如按正则表达式定义折叠范围、可视化折叠层级图、跨文件同步折叠状态等。

1、打开 VSCode 左侧活动栏中的扩展视图(Cmd + Shift + X)。

2、搜索关键词 fold,安装评分高于 4.5 且更新时间在三个月内的扩展,例如 Folding IndentCustom CSS and JS Loader(需配合自定义脚本)。

3、重启 VSCode 使扩展生效,部分扩展需在设置中启用对应语言的支持开关。

相关专题

更多
js获取数组长度的方法
js获取数组长度的方法

在js中,可以利用array对象的length属性来获取数组长度,该属性可设置或返回数组中元素的数目,只需要使用“array.length”语句即可返回表示数组对象的元素个数的数值,也就是长度值。php中文网还提供JavaScript数组的相关下载、相关课程等内容,供大家免费下载使用。

551

2023.06.20

js刷新当前页面
js刷新当前页面

js刷新当前页面的方法:1、reload方法,该方法强迫浏览器刷新当前页面,语法为“location.reload([bForceGet]) ”;2、replace方法,该方法通过指定URL替换当前缓存在历史里(客户端)的项目,因此当使用replace方法之后,不能通过“前进”和“后退”来访问已经被替换的URL,语法为“location.replace(URL) ”。php中文网为大家带来了js刷新当前页面的相关知识、以及相关文章等内容

374

2023.07.04

js四舍五入
js四舍五入

js四舍五入的方法:1、tofixed方法,可把 Number 四舍五入为指定小数位数的数字;2、round() 方法,可把一个数字舍入为最接近的整数。php中文网为大家带来了js四舍五入的相关知识、以及相关文章等内容

730

2023.07.04

js删除节点的方法
js删除节点的方法

js删除节点的方法有:1、removeChild()方法,用于从父节点中移除指定的子节点,它需要两个参数,第一个参数是要删除的子节点,第二个参数是父节点;2、parentNode.removeChild()方法,可以直接通过父节点调用来删除子节点;3、remove()方法,可以直接删除节点,而无需指定父节点;4、innerHTML属性,用于删除节点的内容。

475

2023.09.01

JavaScript转义字符
JavaScript转义字符

JavaScript中的转义字符是反斜杠和引号,可以在字符串中表示特殊字符或改变字符的含义。本专题为大家提供转义字符相关的文章、下载、课程内容,供大家免费下载体验。

394

2023.09.04

js生成随机数的方法
js生成随机数的方法

js生成随机数的方法有:1、使用random函数生成0-1之间的随机数;2、使用random函数和特定范围来生成随机整数;3、使用random函数和round函数生成0-99之间的随机整数;4、使用random函数和其他函数生成更复杂的随机数;5、使用random函数和其他函数生成范围内的随机小数;6、使用random函数和其他函数生成范围内的随机整数或小数。

990

2023.09.04

如何启用JavaScript
如何启用JavaScript

JavaScript启用方法有内联脚本、内部脚本、外部脚本和异步加载。详细介绍:1、内联脚本是将JavaScript代码直接嵌入到HTML标签中;2、内部脚本是将JavaScript代码放置在HTML文件的`<script>`标签中;3、外部脚本是将JavaScript代码放置在一个独立的文件;4、外部脚本是将JavaScript代码放置在一个独立的文件。

656

2023.09.12

Js中Symbol类详解
Js中Symbol类详解

javascript中的Symbol数据类型是一种基本数据类型,用于表示独一无二的值。Symbol的特点:1、独一无二,每个Symbol值都是唯一的,不会与其他任何值相等;2、不可变性,Symbol值一旦创建,就不能修改或者重新赋值;3、隐藏性,Symbol值不会被隐式转换为其他类型;4、无法枚举,Symbol值作为对象的属性名时,默认是不可枚举的。

551

2023.09.20

c++主流开发框架汇总
c++主流开发框架汇总

本专题整合了c++开发框架推荐,阅读专题下面的文章了解更多详细内容。

25

2026.01.09

热门下载

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

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Sass 教程
Sass 教程

共14课时 | 0.7万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 2.8万人学习

CSS教程
CSS教程

共754课时 | 18.4万人学习

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

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