0

0

你掌握了VSCode的所有代码折叠技巧吗?

betcha

betcha

发布时间:2025-09-25 19:09:01

|

784人浏览过

|

来源于php中文网

原创

掌握VSCode代码折叠技巧可显著提升编辑效率。1. 使用Ctrl+Shift+[折叠当前块,Ctrl+K,Ctrl+0折叠所有区域;2. 编辑器依语法自动识别可折叠结构,支持#region自定义区域;3. 可通过大纲视图右键折叠特定函数或类;4. 设置中启用高亮和折叠按钮增强操作体验;5. 插件支持Vue等文件按区块折叠。熟练运用后能明显提升代码浏览节奏。

你掌握了vscode的所有代码折叠技巧吗?

很多人以为代码折叠只是点几下鼠标的事,其实 VSCode 提供了多种高效操作方式,掌握它们能大幅提升阅读和编辑效率。

快捷键快速折叠/展开

熟练使用快捷键是提升效率的关键。以下是最常用的折叠控制组合:

  • Ctrl + Shift + [:折叠当前光标所在的代码块
  • Ctrl + Shift + ]:展开当前折叠的代码块
  • Ctrl + K, Ctrl + 0:折叠所有区域(包括函数、类、注释等)
  • Ctrl + K, Ctrl + J:展开所有已折叠的区域
  • Ctrl + K, Ctrl + [:折叠到指定层级(例如一级结构)

按语言结构智能折叠

VSCode 能根据语法自动识别可折叠区域。比如在 JavaScript 中,函数、对象字面量、if 语句都可以独立折叠;在 HTML 中,标签嵌套层级清晰支持逐层收起。你不需要手动标记,编辑器会解析 AST(抽象语法树)来决定哪些部分可以折叠。

某些语言还支持注释折叠,例如用 // #region// #endregion 包裹一段逻辑代码,在 TypeScript 或 C# 中特别实用。这类自定义区域也会出现在折叠面板中,方便管理大文件中的模块划分。

鼠标与大纲联动操作

除了键盘,也可以用鼠标点击代码左侧的折叠符号(小三角),或者在缩略图上直接点击折叠区域。更高效的玩法是结合“大纲视图”(Outline View):在侧边栏打开大纲,右键点击某个函数或类,选择“折叠”或“展开”,适合快速定位并处理特定结构。

Multiavatar
Multiavatar

Multiavatar是一个免费开源的多元文化头像生成器,可以生成高达120亿个虚拟头像

下载

如果你经常处理大型组件或配置文件,建议开启“折叠未使用代码”功能(需语言支持),VSCode 会自动将未调用的函数或变量区域收起,减少视觉干扰。

个性化设置提升体验

进入设置搜索“folding”,可以调整折叠行为。比如启用 editor.foldingHighlight 让折叠范围有高亮边框,避免误操作;或开启 editor.showFoldingControls,“始终显示”折叠按钮在滚动条旁边,随时点击切换状态。

某些插件还能增强折叠能力,如 Vue 或 Svelte 文件中,支持对模板、脚本、样式三部分分别折叠,通过语言服务器精准控制每个区块。

基本上就这些。不复杂但容易忽略细节,用熟了写代码时节奏感明显提升。

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

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

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

783

2023.08.22

vscode
vscode

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

594

2023.06.30

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

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

223

2023.07.21

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

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

400

2024.03.14

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

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

381

2024.03.14

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

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

553

2024.03.15

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

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

558

2024.03.15

vscode用途介绍
vscode用途介绍

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

506

2024.03.15

2026赚钱平台入口大全
2026赚钱平台入口大全

2026年最新赚钱平台入口汇总,涵盖任务众包、内容创作、电商运营、技能变现等多类正规渠道,助你轻松开启副业增收之路。阅读专题下面的文章了解更多详细内容。

54

2026.01.31

热门下载

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

精品课程

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

共42课时 | 7.5万人学习

Vue3.x 工具篇--十天技能课堂
Vue3.x 工具篇--十天技能课堂

共26课时 | 1.5万人学习

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

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