VS Code 中可通过 Custom CSS and JS Loader 插件注入 CSS 实现文件夹与文件的视觉区分：利用 data-node-type="folder/file" 选择器设置字体粗细、颜色及伪元素前缀，精准控制资源管理器样式。
VS Code 怎么让文件夹和文件在资源管理器里看起来不一样
直接改 workbench.tree.indent 或配图标主题只能调缩进或加图标，真想“视觉区分”得靠 CSS 注入——官方不开放这个设置，但有稳定、低侵入的方案。
用 Custom CSS and JS Loader 插件注入样式
这是目前最可靠的方式：不改 VS Code 源码、不降级、不手动 patch，重启后依然生效。插件本身只做加载，样式逻辑完全可控。
- 装插件：
Custom CSS and JS Loader（作者be5invis） - 启用前必须先关闭 VS Code 的安全限制：在命令面板运行
Developer: Toggle Developer Tools，然后执行npm config set strict-ssl false（仅首次） - 创建自定义 CSS 文件，比如
~/.vscode/custom-tree.css - 在 VS Code 设置里填入路径：
customCSS.imports→ 填file:///Users/xxx/.vscode/custom-tree.css（Windows 用file:///C:/Users/xxx/...） - 重启 VS Code，插件右下角显示 “CSS loaded” 即成功
关键 CSS 规则怎么写才真正区分文件夹和文件
资源管理器 DOM 结构里，文件夹节点带 data-node-type="folder"，文件节点是 data-node-type="file"。别用 .monaco-tree-row 这类泛选择器，容易误伤其他树形控件。
/* 区分文件夹和文件的字体粗细与颜色 */
.monaco-tree-row[data-node-type="folder"] .monaco-tree-row-label {
font-weight: 600;
color: #2563eb;
}
.monaco-tree-row[data-node-type="file"] .monaco-tree-row-label {
font-weight: 400;
color: #1e293b;
}
/* 可选：给文件夹加小箭头前缀（需配合伪元素） */
.monaco-tree-row[data-node-type="folder"] .monaco-tree-row-label::before {
content: "▸ ";
color: #64748b;
}注意：font-weight 在 macOS 上可能被系统字体渲染弱化，建议搭配 color 差异；::before 要确保父元素 position: relative，但 VS Code 默认已设好，不用额外加。
为什么不用图标主题或文件关联来“假装区分”
图标主题（如 Material Icon Theme）只是按扩展名或文件夹名匹配图标，无法统一标记“所有文件夹”，也无法控制文字样式；文件关联（files.associations）只影响语法高亮，对资源管理器毫无作用。
- 图标主题不能改变文字粗细、间距、颜色等排版属性
- 某些图标主题会把
node_modules、dist这类文件夹标成灰色，反而干扰判断 - 如果项目里有同名文件和文件夹（比如
utils和utils.js），纯图标根本分不清
真正的区分要落在结构语义上：文件夹可展开，文件不可展开——这个差异必须在视觉层直接可读，而不是靠猜图标含义。
