VSCode隐藏侧边栏文件或文件夹|实用设置教程无需插件快速搞定

通过settings.json配置，精准隐藏文件/文件夹

要说最灵活、最强大的隐藏方法，那必须是直接修改VSCode的配置文件。别看是代码配置，其实比你想象的简单多了，我见过完全不会编程的设计师都能跟着步骤搞定。这种方法的好处是可以一次性设置多个规则，而且配置文件能导出分享，团队协作时统一环境特别方便。

首先你得打开VSCode的配置文件，有两种简单方式：按Ctrl+Shift+P（Mac用户按Cmd+Shift+P）调出命令面板，输入settings.json，选择”打开用户设置(JSON)”；或者点击左上角”文件”→”首选项”→”设置”，在设置页面右上角找到那个像纸飞机一样的”打开设置(JSON)”图标，点它就行。我个人更推荐快捷键，毕竟程序员的手离开键盘就是对效率的辜负嘛。

打开配置文件后，你会看到一个JSON格式的大括号，咱们要在里面添加"files.exclude"字段。这个字段就像给VSCode列了一张”黑名单”，告诉它哪些文件或文件夹不用显示在侧边栏。格式特别简单，就是"要排除的路径": true，多个规则之间用逗号隔开。比如你想隐藏项目里的node_modules文件夹，可以这样写：

"files.exclude": {
 "/node_modules": true
}

这里的是个通配符，代表”任意文件夹下”，所以/node_modules意思就是”不管在哪个层级的node_modules文件夹都排除”。如果你只想排除当前项目根目录的node_modules，就写成"node_modules": true。我之前帮同事配置时，他的项目里有个叫”temp”的临时文件夹，每个模块下都有一个，用/temp就一次性全排除了，比一个个删方便多了。

除了文件夹，还能排除特定类型的文件。比如我接手过一个老项目，日志文件多得吓人，.log 的文件至少有上百个，每次搜索文件都得过滤半天。后来我直接加了"/.log": true，所有日志文件瞬间从侧边栏消失，整个世界都清净了。如果你经常用Git，.git文件夹和.gitignore文件也可以排除，写成"/.git": true, "/.gitignore": true就行。

为了让你更清楚怎么配置，我整理了几个开发中最常用的排除规则，你可以直接复制到自己的配置文件里：

配置完记得按Ctrl+S保存，VSCode会自动生效，你马上就能看到侧边栏里对应的文件/文件夹消失了。不过这里有个小坑要提醒你：如果你的配置文件里已经有"files.exclude"字段，千万不要直接覆盖，而是在里面添加新的规则。比如原来有排除.log文件的规则，现在想加node_modules，应该写成：

"files.exclude": {
 "/.log": true, // 原来的规则
 "/node_modules": true // 新增的规则，注意这里不加逗号
}

我第一次配置时就犯过这个错，直接替换导致之前的设置全没了，还好VSCode有历史记录功能（按Ctrl+Z撤销）。如果你怕写错，可以先把原来的配置复制到记事本里备份，这样就算出错也能恢复。

用侧边栏图形化操作，鼠标点点就能隐藏

如果你觉得改配置文件太麻烦，或者只是想临时隐藏某个文件，VSCode其实还提供了更简单的图形化操作——直接在侧边栏右键点击文件/文件夹，就能看到”排除文件夹”（或”排除文件”）的选项，点一下就完事，完全不用碰代码。这种方法特别适合临时处理单个文件，或者给完全不懂代码的设计师、产品经理用。

我前阵子帮公司UI设计师配置VSCode时，就用的这个方法。她需要看前端代码里的图片路径，但node_modules文件夹占满了侧边栏，找图片文件夹特别费劲。我让她在侧边栏找到node_modules，右键点击，选”排除文件夹”，一秒钟就隐藏了，她当时眼睛都亮了，说”原来这么简单！”

具体操作步骤其实不用我多说，你一看就会：在侧边栏找到要隐藏的文件或文件夹，右键点击，在弹出的菜单里找”排除文件夹”（如果是单个文件就是”排除文件”）。点击后，这个文件/文件夹会立刻从侧边栏消失，而且文字会变成灰色显示在原来的位置（鼠标移开就看不到了），告诉你”这个项目已排除该文件夹”。

不过这种方法隐藏的文件，其实是保存在”工作区排除”列表里的，如果你想恢复显示，或者管理所有排除的文件，可以这样操作：在侧边栏顶部找到”资源管理器”图标（就是那个文件夹样子的图标），点击右上角的三个点（更多操作），选择”打开排除的项目”，就能看到所有被排除的文件/文件夹，想恢复哪个就右键点击，选”从排除中移除”。我自己经常用这个功能临时排除日志文件夹，等调试完再恢复显示，特别方便。

这里有个小技巧要告诉你：如果想一次性排除多个文件，可以按住Ctrl键（Mac按Cmd键）多选，然后右键点击任意一个选中的文件，选”排除文件”，就能批量隐藏了。我上次整理项目文档时，一下子排除了十几个过时的.md文件，比一个个点快多了。

可能你会问：这两种方法有什么区别？该用哪个？其实它们各有优缺点，适合不同场景。我 了一个对比表，你可以根据自己的需求选择：

这里要特别说明一下”用户设置”和”工作区设置”的区别：如果你打开的是”用户设置(JSON)”，配置会应用到你所有的VSCode项目；如果打开的是”工作区设置(JSON)”（在命令面板输入”工作区设置”），配置只对当前打开的项目生效。我通常会把通用规则（比如排除.log文件）放在用户设置，项目特定的规则（比如某个项目特有的temp文件夹）放在工作区设置，这样既方便又灵活。

其实两种方法我都经常用：写代码时遇到临时文件用右键排除，项目初始化时用配置文件批量设置常用排除规则。你可以根据自己的需求选择，或者像我一样混合使用——毕竟工具是为人服务的，怎么方便怎么来。

最后再分享个小经验：不管用哪种方法，排除文件后记得重启一下VSCode（虽然大部分时候不用重启也生效），特别是排除大型文件夹（比如node_modules）时，重启能让VSCode加载更快。我之前有个项目node_modules有2G多，排除后没重启，侧边栏虽然不显示了，但VSCode还是有点卡，重启后瞬间流畅了。

如果你按这些方法试了，欢迎回来告诉我效果！或者你有其他隐藏文件的小技巧，也可以在评论区分享给我，咱们一起把VSCode用得更顺手～

你肯定遇到过这种情况：想排除项目里所有的日志文件夹，但这些logs文件夹有的在根目录，有的藏在src子文件夹里，总不能一个个写路径吧？这时候通配符就派上用场了，它就像是给文件路径画个范围，告诉VSCode“符合这个样子的都算”。最常用的就是两个星号，意思是“任意层级的文件夹”，比如/logs就能匹配到不管藏多深的logs文件夹——不管是根目录下的logs，还是src/utils/logs，甚至是src/components/child/logs，全都能一次性排除。我之前帮同事配置的时候，他的项目里每个模块文件夹下都有个temp临时目录，用/temp直接全清干净，省得他一个个右键排除，效率一下子提上来了。

单个星号也很实用，它能匹配任意字符，但只在同一层级生效，特别适合排除特定后缀的文件。比如你想隐藏所有的临时文件，就写.tmp；想把项目里的日志文件都藏起来，就用.log。我自己写代码时，经常会生成一些.debug.js的调试文件，用/.debug.js就能把所有子文件夹里的调试文件都排除掉，既不影响开发，又让侧边栏清爽不少。不过要注意，不会跨文件夹匹配，比如src/.js只能匹配src目录下的.js文件，藏在src/utils里的.js就管不着了，这时候就得配合用，比如src//.js才能匹配src下所有子文件夹的.js文件。

还有个用得少但关键时刻很有用的通配符?，它只匹配单个字符，适合文件名有规律变化的场景。比如你有一批测试文件叫file1.txt、file2.txt、file3.txt，想把它们都隐藏，就可以写file?.txt——这里的?就代表1、2、3这样的单个数字或字符。我之前处理过一个老项目，里面有v1、v2、v3三个版本的配置文件夹，用version?就能把version1、version2、version3都匹配到，比写三个路径简洁多了。不过要注意，?只能匹配一个字符，要是文件名是version10，带两个数字，那version?就匹配不到了，这时候可能得用version才保险。

其实通配符还能组合着用，比如src//.test.js，意思就是“src目录下任意层级文件夹里，所有以.test.js 的文件”。我带实习生的时候，就教他们用这个规则排除所有测试文件，既能保持侧边栏干净，又不用担心误删有用代码。不过刚开始用的时候容易写错，比如把放错位置——写成src/.js就不对了，应该是src//.js，记住要放在你想“穿透”的文件夹后面，这样才能准确匹配子目录里的数据。多试两次你就会发现，通配符用熟了，配置隐藏规则比想象中简单多了，甚至比一个个右键点击还快呢！

隐藏的文件或文件夹如何恢复显示？

恢复显示的方法与隐藏方式对应：若通过settings.json配置隐藏，打开配置文件删除对应规则或改为”false”即可；若通过侧边栏图形化操作隐藏，右键点击侧边栏空白处选择”显示排除的项目”，找到灰色的隐藏文件/文件夹后右键选择”从排除中移除”。两种方式操作后侧边栏会即时更新，无需重启VSCode。

settings.json里的通配符有哪些常用用法？

常用通配符包括：（匹配任意层级文件夹，如”/logs”匹配所有目录下的logs文件夹）、（匹配任意字符，如”.tmp”匹配所有.tmp后缀文件）、?（匹配单个字符，如”file?.txt”匹配file1.txt、file2.txt等）。例如”src//*.test.js”可精准匹配src目录下所有子文件夹中的.test.js测试文件，适合批量排除特定类型文件。

隐藏的文件会影响VSCode的搜索或编译功能吗？

默认情况下，通过”files.exclude”隐藏的文件会同时被排除在VSCode的全局搜索（Ctrl+Shift+F）结果外。若希望隐藏但仍能搜索到，可单独配置”search.exclude”字段（格式与”files.exclude”相同），设置”files.exclude”隐藏显示，”search.exclude”: false允许搜索。编译或运行项目时，隐藏的文件实际仍存在于磁盘，不会影响项目功能，仅侧边栏不显示。

工作区设置和用户设置有什么区别？

用户设置（User Settings）全局生效，适用于所有VSCode打开的项目，配置保存在用户目录下；工作区设置（Workspace Settings）仅对当前打开的项目生效，配置保存在项目根目录的.vscode文件夹中，可随项目分享给团队。 将通用规则（如排除.log文件）放在用户设置，项目特定规则（如项目独有的temp文件夹）放在工作区设置，避免影响其他项目。

可以同时使用两种隐藏方法吗？会冲突吗？

可以同时使用，两者不会冲突但存在优先级：settings.json配置的规则优先级高于侧边栏图形化操作。例如通过图形化排除了”dist”文件夹，又在配置文件中设置”/dist”: false，最终会以配置文件为准显示dist文件夹。 根据场景选择：临时隐藏单个文件用图形化操作，长期批量隐藏用配置文件，混合使用时注意配置文件的规则会覆盖图形化设置。

YUANLEISVIP

收藏 链接