vscode 调整文件夹目录缩进大小

布满荆棘的人生 2023-09-26 09:21 21阅读 0赞

现在电脑普遍分辨率较高，尤其一些高配电脑，屏幕分辨率很高。在这些电脑中安装VS Code后，导入代码工作空间后，会发现左侧的文件目录树父子层级间的缩进很小：

![dd786f913c58bea5d3ab79d2accd001a.png][]

如上图，父子层级的缩进很小，层级关系不是很明显，在MacBook等retina屏幕中，更为严重，多个层级几乎都在一条竖线上。

目录父子层级太小，会让人感到目录层级不明显、难以一眼分辨清楚，造成不好的体验。犹豫目录层级关系不明显，更有可能搞错目录、张冠李戴修改了本不应修改的文件，造成一定事故的风险。

如何修改目录树层级缩进大小呢？

我们打开设置（Settings）项，找到Workbench->Appearance节点，找到里面的tree: Indent一项，这项便是设置目录树层级缩进大小的，修改输入框中的数字，单位是像素，观察实际缩进大小修改都一个合适的大小即可。

![158b482d645034c155bf83e5c286c336.png][]

可以看到默认是8像素，对于高分屏来说，8像素实在是很小的距离，难怪层级缩进不明显。改为24像素的效果如下：

![25c8134e8e2237cf6931949f28e4a2fc.png][]

可见目录层级比上面明显很多了。这里也要吐槽VS Code不够贴心的一点，应该判断电脑屏幕分辨率自行设置一个合适的大小，而不是定死8像素，有待优化。

[Visual Studio Code的一些使用技巧 | Antbaba技术博客][Visual Studio Code_ _ Antbaba]

[vscode 调整文件夹目录缩进大小 - 码农教程][vscode _ -]

[dd786f913c58bea5d3ab79d2accd001a.png]: https://img-blog.csdnimg.cn/img_convert/dd786f913c58bea5d3ab79d2accd001a.png
[158b482d645034c155bf83e5c286c336.png]: https://img-blog.csdnimg.cn/img_convert/158b482d645034c155bf83e5c286c336.png
[25c8134e8e2237cf6931949f28e4a2fc.png]: https://img-blog.csdnimg.cn/img_convert/25c8134e8e2237cf6931949f28e4a2fc.png
[Visual Studio Code_ _ Antbaba]: https://www.antbaba.com/2020/08/04/visual-studio-code%E7%9A%84%E4%B8%80%E4%BA%9B%E4%BD%BF%E7%94%A8%E6%8A%80%E5%B7%A7/
[vscode _ -]: http://www.manongjc.com/detail/29-hrvzchjniedmmfy.html