🚀 提升代码阅读效率！VS Code 自动折叠神器 Auto-FoldX 使用指南
在日常开发中，你有没有遇到过这样的情况：
- 打开一个文件，div, import, function... 全部展开一大坨直接铺满屏幕
- 函数层级太深，核心逻辑被淹没
- 每次都要手动
Fold一遍代码，效率极低
今天给大家推荐一个非常实用的小插件 ——
👉 Auto-FoldX：自动折叠代码神器
👉 插件地址：
marketplace.visualstudio.com/items?itemN…
✨ 一、Auto-FoldX 是什么？
Auto-FoldX 是一个 VS Code 插件，可以在你打开文件时：
👉 自动按配置折叠代码结构
👉 帮你快速聚焦核心逻辑
简单说就是：
“帮你省掉每次手动折叠代码的操作”
插件核心能力：
- 自动折叠代码块
- 支持多层级折叠
- 支持按文件类型配置
- 可自定义延迟执行
👉 打开文件即生效，几乎“无感使用” (Visual Studio Marketplace)
⚡ 二、为什么你需要它？
1️⃣ 提高代码阅读效率
很多项目一打开就是：
用了 Auto-FoldX 后：
👉 自动折叠 div, import, function... 帮你更快找到代码块
2️⃣ 减少重复操作
以前流程：
打开文件 → Ctrl+K Ctrl+0 → 开始看代码
现在：
打开文件 → 直接看
3️⃣ 大项目更爽
在以下场景特别有用：
- Vue / React 项目
- 单文件动辄上千行
- 多层嵌套函数/组件
🛠 三、安装方式
方法一（推荐）
- 打开 VS Code
- 点击 扩展
- 输入 auto-foldx
方法二
直接 Marketplace 安装即可 (点击打开链接打开)
⚙️ 四、核心配置详解
1️⃣ 基础配置（全局折叠）
{
"autoFold.foldLevelOnOpen": [2, 3]
}
说明：
| 配置 | 含义 |
|---|---|
[1] | 只折叠第一层 |
[1,2] | 折叠前两层 |
[2,3] | 常用（推荐） |
[] | 关闭自动折叠 |
👉 默认是 [2,3] (Visual Studio Marketplace)
2️⃣ 按文件类型配置（推荐🔥）
{
"autoFold.foldLevelOnOpen": {
"default": [2, 3],
"patterns": [
{
"pattern": ".vue",
"foldLevels": [2, 3, 4, 5]
},
{
"pattern": ".ts",
"foldLevels": [2, 3, 4]
},
{
"pattern": ".json",
"foldLevels": [2, 3]
}
]
}
}
👉 不同文件用不同折叠策略，非常实用
3️⃣ 延迟执行（避免卡顿）
{
"autoFold.openDelayMs": 300
}
说明：
- 默认：300ms
- 可调范围：0 ~ 5000ms (Visual Studio Marketplace)
🎯 五、实际效果
使用前
📂 打开文件
⬇
一屏 div import function... + 注释 + 嵌套代码
使用后
📂 打开文件
⬇
✨ 自动折叠
⬇
只剩核心逻辑
👉 阅读体验直接提升一个档次
💡 六、使用建议（个人经验）
我自己的推荐配置👇
{
"autoFold.foldLevelOnOpen": {
"default": [2, 3],
"patterns": [
{ "pattern": ".vue", "foldLevels": [2, 3, 4, 5] },
{ "pattern": ".tsx", "foldLevels": [2, 3, 4, 5] },
{ "pattern": ".ts", "foldLevels": [2, 3, 4] },
{ "pattern": ".json", "foldLevels": [2] }
]
},
"autoFold.openDelayMs": 200
}
🚧 七、适合人群
这个插件特别适合：
- 👨💻 前端开发（Vue / React）
- 🧠 需要频繁阅读代码的人
- 📦 大型项目维护者
- 📚 学习源码的人
🧾 八、总结
一句话总结：
👉 Auto-FoldX = 打开文件自动整理代码结构
它不是那种“炫技插件”，但属于：
用一次就离不开的效率工具
🔚 最后
如果你也受不了每次手动折叠代码：
👉 强烈建议试一下这个插件
有更好的 VS Code 插件，也欢迎评论区交流 👇
