如何在VS Code中设置折叠区域默认折叠及指定代码段hover展开？

一、让折叠区域默认处于折叠状态 #

1. 打开设置面板（快捷键：Ctrl+, / Cmd+,）
2. 搜索 editor.defaultFoldingLevel，将值设置为 0，所有支持折叠的代码区域（函数、代码块、类等）在打开文件时会默认完全折叠
   • 若只想针对特定语言生效（比如仅CSS文件），可添加语言专属配置：

     "[css]": {
       "editor.defaultFoldingLevel": 0
     }
     

3. 确保editor.foldingStrategy保持默认的auto，VS Code会自动识别对应语言的可折叠区域

二、针对特定类代码段设置折叠（以样式属性为例） #

内置配置实现默认收起样式属性 #

针对CSS/SCSS中的样式规则块（比如.container { ... }内的属性列表），可通过以下配置实现精准折叠：

1. 点击设置面板右上角的「打开设置(JSON)」按钮
2. 添加如下配置：

   "[css]": {
     "editor.defaultFoldingLevel": 1,
     "editor.foldingStrategy": "indentation"
   }
   

   • editor.defaultFoldingLevel: 1 会让一级嵌套的内容（即选择器内的属性块）默认折叠，顶层选择器保持展开
   • 切换到indentation折叠策略后，VS Code会严格按缩进识别折叠区域，精准匹配样式属性的嵌套结构

实现悬停展开效果 #

VS Code原生无悬停自动展开功能，可直接在扩展市场搜索安装Hover Fold插件，它支持鼠标悬停折叠块时自动展开，移开鼠标后重新折叠，完美解决样式代码庞大致使可读性差的问题

内容的提问来源于stack exchange，提问作者Allleex