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

很多人以为代码折叠只是点几下鼠标的事，其实 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）：在侧边栏打开大纲，右键点击某个函数或类，选择“折叠”或“展开”，适合快速定位并处理特定结构。

代码小浣熊

代码小浣熊是基于商汤大语言模型的软件智能研发助手，覆盖软件需求分析、架构设计、代码编写、软件测试等环节

51

查看详情

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

个性化设置提升体验

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

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

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