Feature request: bold_folder_labels setting like Sublime's

[zertosh]

I really appreciate the minimal UI, however, I really do miss Sublime's bold_folder_labels. It does just that - makes folder labels bold - adding a distinguishing characteristic between them and files. This helps a lot when:

• Dealing with long file and folder names, since it's no longer necessary to visually scan the entire right-to-left range of an item to determine what it is (i.e. spotting the expansion triangle);
• Scanning the Explorer vertically, since the boundary between when folders end and files begin becomes clearer.

There are multiple issues (#123, #1833, #3200, many more) requesting a more powerful API for UI customization. But I couldn't find any issue requesting a specific setting to control the visual aspect of folders.

[bpasero]

@zertosh we plan to add support for icons in the next release, would that help?

[zertosh]

It would definitely help, but at the expense of clutter. Would you consider a PR that did something like this? (I'm not fixated on the name or anything, so feedback is welcomed)

diff --git a/src/vs/workbench/parts/files/browser/files.contribution.ts b/src/vs/workbench/parts/files/browser/files.contribution.ts
index cad2f06..9e991cf 100644
--- a/src/vs/workbench/parts/files/browser/files.contribution.ts
+++ b/src/vs/workbench/parts/files/browser/files.contribution.ts
@@ -257,6 +257,11 @@ configurationRegistry.registerConfiguration({
                        'description': nls.localize('enableDragAndDrop', "Controls if the explorer should allow to move files and folders via drag and drop."),
                        'default': true
                },
+               'explorer.boldFolderLabels': {
+                       'type': 'boolean',
+                       'description': nls.localize('boldFolderLabels', "Controls if the explorer should bolden folder labels. This makes folders more visually distinct than files."),
+                       'default': false
+               },
                'explorer.showFileIcons': {
                        'type': 'boolean',
                        'description': nls.localize('showFileIcons', "Controls if the explorer shows icons for files and folders. The actual icon set is controled with the 'files.iconSet' setting."),
diff --git a/src/vs/workbench/parts/files/browser/media/explorerviewlet.css b/src/vs/workbench/parts/files/browser/media/explorerviewlet.css
index 586181e..48a0e24 100644
--- a/src/vs/workbench/parts/files/browser/media/explorerviewlet.css
+++ b/src/vs/workbench/parts/files/browser/media/explorerviewlet.css
@@ -33,6 +33,14 @@
        background-position: left center;
 }

+.explorer-viewlet .explorer-folders-view.bold-folder-labels .monaco-tree .monaco-tree-row.has-children > .content {
+       font-weight: bold;
+}
+
+.explorer-viewlet .explorer-folders-view.bold-folder-labels .monaco-tree .monaco-tree-row:not(.has-children) > .content {
+       opacity: 0.7;
+}
+
 .explorer-viewlet .explorer-open-editors .monaco-tree .monaco-tree-row > .content > .monaco-action-bar {
        visibility: hidden;
 }
diff --git a/src/vs/workbench/parts/files/browser/views/explorerView.ts b/src/vs/workbench/parts/files/browser/views/explorerView.ts
index 67ab5ca..dad8b71 100644
--- a/src/vs/workbench/parts/files/browser/views/explorerView.ts
+++ b/src/vs/workbench/parts/files/browser/views/explorerView.ts
@@ -199,6 +199,10 @@ export class ExplorerView extends CollapsibleViewletView {
        private onConfigurationUpdated(configuration: IFilesConfiguration, refresh?: boolean): void {
                this.autoReveal = configuration && configuration.explorer && configuration.explorer.autoReveal;

+               // Bold folder labels
+               let boldFolderLabels = configuration && configuration.explorer && configuration.explorer.boldFolderLabels;
+               DOM.toggleClass(this.treeContainer, 'bold-folder-labels', boldFolderLabels);
+
                // React to file icons setting by toggling global class on tree
                let showFileIcons = configuration && configuration.explorer && configuration.explorer.showFileIcons;
                DOM.toggleClass(this.treeContainer, 'show-file-icons', showFileIcons);
diff --git a/src/vs/workbench/parts/files/common/files.ts b/src/vs/workbench/parts/files/common/files.ts
index df58e9d..511d7bc 100644
--- a/src/vs/workbench/parts/files/common/files.ts
+++ b/src/vs/workbench/parts/files/common/files.ts
@@ -67,6 +67,7 @@ export interface IFilesConfiguration extends IFilesConfiguration, IWorkbenchEdit
                        dynamicHeight: boolean;
                };
                autoReveal: boolean;
+               boldFolderLabels: boolean;
                enableDragAndDrop: boolean;
                showFileIcons: boolean;
        };

[bpasero]

We should decide in a UX meeting if we really want this.

[stemcc]

I think at least having this as an option in settings.json would be really helpful, and you can default the behavior to what it does now. In a project with hundreds of folders and thousands of files, file names in bold would really help my eyes scanning the file tree.

[bgashler1]

@stemcc have you tried one of the icon themes in VS Code? Does that mitigate the concern of differentiating folders from files?

[stemcc]

*EDIT 10/16/2016 * I recommend for anyone else who shares my sentiments, to check out https://github.com/robertohuertasm/vscode-icons, which uses better contrast between its folder and file icons than the other icon themes I mentioned below.

@bgashler1 indeed, I've tried Minimal, Seti (VSCode), and Nomo Dark Icon Theme.

I plan on sticking with Seti, but you'll notice that both Seti and Nomo Dark use carrots/arrows for their folder icons. That makes the folder tree easier on my eyes than without them, but it still doesn't quite feel "fast enough" for my brain/eyes to grok.

Immediately contrasting folders require little processing power on the part of my brain, and if the bolded folders were an option in settings, then we could use both the icon themes (which I really like and will continue using) along with contrasting folder font.

I never realized how little I actually acutely focused my eyes on my file tree tree when Im working on code across multiple folders. I wonder if this is simply a matter of VSCode doing things differently than Sublime and I just need more time to adjust.

But I'm the kind of person who increases the contrast on all my screens whenever possible because it's just so much more "comfortable" for me to use that way. Otherwise I find myself being aware of my eyes focusing in on text, whereas with more contrast, focusing on text seems more "automatic" for me.

I hope this doesn't sound hopelessly subjective!

[equinusocio]

@bpasero Any update? I think this setting should be added showing only folder icons is not enough and the users should decide if using icons or file + bolded folders or both.

Also having the ability to differentiate the folders foreground color from files is critical since colors are perceived before icons and text. (@bgashler1)

[isidorn]

This feature request will not be considered in the next 6-12 months roadmap and as such will be closed to keep the number of issues we have to maintain actionable. Thanks for understanding and happy coding!

[equinusocio]

a 2 hrs feature... oks. Thank you.

[klaasman]

I'm really interested in this feature. Visual differences between files and folders are way more apparent with bold / non-bold styles compared to only some icons.

[thatdoorsajar]

I'm also really interested in this feature. All vscode-icon setting are great but the reduction in cognative load you get from Sublimes bold_folder_labels option is quite a lot better.

[darkobits]

This would definitely be nice to have.

In a monorepo, its not uncommon to have a sidebar with enough entries to fill the entire screen (1440px in my case) and the immediate visual feedback one gets from the difference in font weight between folders and files makes a significant impact on the signal-to-noise ratio.

[mcescalante]

I also miss this feature in VSCode and would love to see this make it in the future. Sure, there are arrows, carets, or icons but I prefer having bolded (or colored) folders - it really makes a difference when browsing in a sidebar with lots of files.