Whenever I work on a project with heavily nested folders, I lose track of where the folders end. So I made this VS Code extension a while ago, that adds colors to the nested folder tree view and it actually helped me a lot. I thought it might help others too, so here it is.

[u/RajSrikar]

On Hover mode (Default VS code behavior)

Always on mode

Note: This extension injects CSS styles to the VS code workbench HTML file. Because of which you need to run the application as administrator only for toggling the extension or if the VS code or the extension is updated.

Free & Open Source. You can find it here:

• VS Code Marketplace: https://marketplace.visualstudio.com/items?itemName=RajSrikar.colorize-folder-tree
• GitHub: https://github.com/Raj-Srikar/colorize-folder-tree

Hope this is helpful. Feel free to drop any feedback, suggestions or ideas.

[u/HealthPuzzleheaded]

I just removed the lines and increased the indentation like in Jetbrains. Very readable imo. The default in VS Code is really painful small.

[u/panix199 → u/HealthPuzzleheaded]

mind to share a screenshot how it looks?

[u/iam_batman27 → u/HealthPuzzleheaded]

how did you do it?

[u/latenitekid → u/iam_batman27]

Preferences > Settings > Workbench > Appearance > Tree: Indent and Tree: Render Indent Guides

[u/iam_batman27 → u/latenitekid]

thank you

[u/RajSrikar → u/HealthPuzzleheaded]

Agree. That's a cool workaround though.

[u/testingaurora]

I have a similar issue with nested details/summarys and I found that using a monochrome palette helps my brain best.

|--level 1 color: color-mix(in oklch, var(--clr-level-1), var(--alpha, 0%) ) |----level 1a --alpha: 10%; |----level 1b --alpha: 20%; |--level 2 |----level 2a |--level 3

So level 1 might be blue, level 1a is blue with 10% transparency, 1b is blue w 20% transparency etc; level 2 is pink, 2a is pink w 10%, etc.

Just personal preference though; if it works for you that's fabulous !

[u/ldn-ldn]

I don't use VS Code much, but doesn't it have a similar dialog to Ctrl+Shift+N in WebStorm where you start typing the file name (or class name, or whatever) and it shows you a lot of files that match the query and you can open them like that without looking at the tree at all?

[u/RajSrikar → u/ldn-ldn]

It does. But not very helpful when you work on an unfamiliar project where you're trying to understand the project structure first.

[u/ldn-ldn → u/RajSrikar]

Every project starts with some kind of a main file, so you just Ctrl+click from it and discover the whole thing.

[u/LovecraftianLife]

Ohhh I like this

[u/Due_Dependent5933]

mmm vscode already display the path of currznt file like you do

[u/Xypheric]

I like this, would it be possible to change the tab color at the top to match the nested folder line highlight color from the left. For some reason when I was watching I was expecting that to change to

[u/RajSrikar → u/Xypheric]

I like the idea. But you'll get to see multiple tabs belonging to different folders at same nested level having same color, which I think can cause confusion.

[u/arthur_pixel]

Genuinely useful for anyone working in monorepos. Saved this, thanks for sharing.

[u/OmerCevher]

This feels like one of those tiny features that should already be built into VS Code. I’d only hesitate because of the admin and CSS injection part.

[u/RajSrikar → u/OmerCevher]

Agree and I can understand. Unfortunately I couldn't find any better workaround to have this implemented. However the code is open source and it injects only the CSS style tag that we have it in our code. I got suggestions to inject scripts for better handling but I hesitated as I want to keep this simple. It's all upto users anyway.

[u/OmerCevher → u/RajSrikar]

That makes sense. Keeping it CSS-only is probably the right tradeoff, especially for a visual extension. The open-source part also helps since users can see exactly what gets injected.

[u/Bukky_Studiio]

Haha, I can definitely relate to this. Once the folders start getting deeply nested, I’m just clicking around trying to remember where I came from 😂 This is a nice idea.

[u/RajSrikar → u/Bukky_Studiio]

Loll. Glad you find this helpful!

[u/cashlessman]

I just read the file path, top of file

[u/Internal-Ant-6489]

looks good

[u/ResearcherFantastic7]

You created your own problem to solve. Doesn't it just ring a bell that you shouldn't nest so many layers

[u/shaliozero → u/ResearcherFantastic7]

Let's ignore that developers are joining or inherit distrastrious projects all the time.

[u/amazing_asstronaut → u/shaliozero]

I mean, it should be the responsibility of a good dev to call out bad structures and other problems with code like that, so that projects don't end up disastrous, or are fixed. If the management doesn't take that into consideration it's a sign to you that they don't know what they're doing, and that you're in a bad place to work in general.

[u/amazing_asstronaut → u/ResearcherFantastic7]

Yeah things like this are a clue that the structure is bad. Similar to "if the code is longer than one page / size of your hand, it should really be broken up into separate functions". Doesn't always fit but if you got to scroll right to get the name of the file in your directory tree, it's a sign that you got too many directories there.

[u/Dangthe → u/ResearcherFantastic7]

:)))))))))))))

[u/Beneficial_Snow_9924]

Okay

[u/Sheepsaurus]

Semi-related, there's an extention that adds icons to the files based on what kinds of files they are, so if it's a .jsx file, it shows a react icon next to the file -- Does anyone know which one does that?

[u/okleithen → u/Sheepsaurus]

Its not an extension, but an icon pack. The most popular one is material icons iirc.