Visual Studio Code change font size for file explorer tray?

Question

How do I change the font size for the file explorer in Visual Studio Code? There is not an option in the settings.json file.

Duplicate of http://stackoverflow.com/questions/35774918/vs-code-customize-sidebar — Daniel Imms, Mar 17 '16 at 19:48
You can track progress of this feature at https://github.com/microsoft/vscode/issues/519 — jarmod, Sep 04 '19 at 15:32
@DanielImms The explorer tray is the one with the icons, it's not the same as the sidebar. Explorer icons change what is shown in the sidebar. — Advait Junnarkar, Mar 16 '20 at 23:27
@AdvaitJunnarkar technically "explorer tray" is not a thing in VS Code, what you're referring to is called the "activity bar". Pretty sure the OP is talking about the sidebar aka the viewlet. — Daniel Imms, Mar 17 '20 at 00:35

score 257 · Answer 1 · answered Mar 16 '16 at 16:49

257

I've found that setting the zoom level in settings.json works well for this:

"window.zoomLevel": 1

answered Mar 16 '16 at 16:49

hamiltonia

2,895
1
9
5

34

Unfortunately, that zooms all the windows/panes, so I would have to make the font size in the editor windows smaller to compensate. – Jon Watte Jun 13 '16 at 17:25
8

It also makes the fonts blurry, since everything is just zoomed. An actual setting for this would be far preferable. There also seems to be quite a jump from zero to one, and something like .5 is not allowed. – Kallaste Jun 03 '18 at 23:39
one issue i found with this is default font on linux does not look good when zoomed out.. even -0.5 – Sonic Soul Feb 27 '19 at 14:14
if suffering from editor font size you can turn on zooming by mouse wheel + CTRL, just search for zoom in settings ... – Amr Lotfy Mar 09 '19 at 14:40
in the most recent version, I had to type this in the search field in the `preferences` and it automatically showed me a number I can increment and decrement. – Gel Apr 14 '20 at 16:29
@Kallaste - `zoomLevel` allows fractional numbers now, but as you say, an actual setting for this would be better. (Also, the `zoomLevel` units are...odd. Each whole number is 20%. So 1 = 120%, 2 = 140%, ... o_O) – T.J. Crowder Aug 10 '21 at 06:57
I think it's pretty clear what the OP asked. How is this the highest rated answer? – James0r Mar 31 '23 at 19:52

score 93 · Answer 2 · edited Jun 12 '18 at 10:54

93

I have set

"window.zoomLevel": -1 and "editor.fontSize": 16.5

it works great here's a preview,

here's a preview

edited Jun 12 '18 at 10:54

JustBaron

2,319
7
25
37

answered Jun 12 '18 at 10:03

elainr5

1,049
7
8

Worked for me. Thank you. – Alexander Nov 25 '19 at 16:16
1

in the most recent version, I had to type this in the search field in the `preferences` and it automatically showed me a number I can increment and decrement. `window.zoomLevel` – Gel Apr 14 '20 at 16:29
2

I like this hack but I wish explorer had it's own font size setting – Joe Seifi Dec 05 '22 at 19:35
works really nicely – Ishan Srivastava Mar 29 '23 at 11:50

score 58 · Answer 3 · answered Sep 21 '17 at 12:57

58

Sample value : -1, 0, 1, 2, ...

I have mine set to 0, like this "window.zoomLevel": 0,

Save the file, you will see the effect right the way.

answered Sep 21 '17 at 12:57

code-8

54,650
106
352
604

2

in the most recent version, I had to type this in the search field in the `preferences` and it automatically showed me a number I can increment and decrement. – Gel Apr 14 '20 at 16:29

score 35 · Answer 4 · edited Jun 04 '20 at 18:52

35

I'm visually impaired and I had the same problem, my solution was

"Zoom Out" until I achieved my desired Explorer size (CTRL-), everything will be zoomed out.
Edit the settings.json and change the "fontSize" to 20 as reflected in my settings.json.

{
    "window.zoomLevel": 0,
    "editor.fontSize": 20,
    "php.validate.executablePath": "C:/apps/php 7.0.14/php.exe"
}

edited Jun 04 '20 at 18:52

Tom J Nowell

9,588
17
63
91

answered Apr 20 '17 at 18:37

Lester Johnson

467
4
3

1

For those that want the file explorer a smaller font size (for navigability and because you don't stare at it all the time) and the editor size the size you want, this is the solution for you. – Benyam Ephrem Jan 30 '21 at 16:32

Oranit Dar · Answer 5 · 2020-07-28T10:13:49.040

22

Type CTRL+SHIFT+P inside your VSCODE window and type/select "Open Settings (JSON)"

If you find the default font settings tiny (very much like I do), inside the curly brackets type:

"editor.fontSize": 16,
"terminal.integrated.fontSize": 14,
"window.zoomLevel": 1.4,

Try changing the sizes until it works for you

edited Jul 28 '20 at 10:13

answered Jul 22 '20 at 05:14

Oranit Dar

1,539
18
17

3

none of these actual change the size of the explorer, and you can check the docs to confirm none of them are related. – user4893106 Sep 15 '20 at 03:51
@user4893106 I can confirm is window.zoomLevel. You need to save the file. – boctulus Jul 10 '21 at 00:26

score 14 · Answer 6 · answered Jul 08 '20 at 11:26

14

You can try:

Ctrl + + for zoom in

or

Ctrl + - for zoom out

answered Jul 08 '20 at 11:26

Bojan

769
9
16

score 10 · Answer 7 · answered Mar 28 '18 at 18:13

10

I found what worked for me was "window.zoomLevel": 0.25, "editor.fontSize": 12

answered Mar 28 '18 at 18:13

Abhishek Divekar

1,131
2
15
31

score 4 · Answer 8 · answered Oct 05 '20 at 10:52

4

The decent way to do is to edit the "window.zoomLevel": 0, It changes everything on the screen from Project Explorer to your Font.

Also, You can customize only the font by "editor.fontSize": 15

P.S 15px is my personal choice.

answered Oct 05 '20 at 10:52

theCaptainXgod

223
1
7

score 3 · Answer 9 · answered May 10 '22 at 22:47

Here another solution but it needs done at every update. Open (windows)

 C:\Users\me\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\workbench.desktop.main.css

Then look for the first

  .part>.content

And replace the size.

  .part>.content{font-size:13px}

score 2 · Answer 10 · answered Mar 27 '21 at 06:22

The idea here is, you can make your window zoom level small and increase the font size, It will decrease the size of the window and font size you can select of your own size.

My MacBook Pro 16 settings.json is :

{

"window.zoomLevel": 0,
"editor.fontSize": 14,

}

score 2 · Answer 11 · edited Jun 10 '22 at 14:41

2

Shortcut for increasing font size of just the file explorer in VSCode ->

Ctrl + Shift + =

Shortcut for decreasing font size of just the file explorer in VSCode ->

Ctrl + Shift + -

edited Jun 10 '22 at 14:41

Lee Taylor

7,761
16
33
49

answered Jun 05 '22 at 13:51

Robert Yeomans

192
1
4

Thanks. This worked for terminal as well. On Mac, it is "cmd + shift + =" – Hem Feb 03 '23 at 01:03
3

These shortcuts are not resolving the issue , it is increasing font size all over the editor not specifically the file explorer section . – thinkerBOB May 24 '23 at 06:01

score 1 · Answer 12 · answered Jun 03 '19 at 23:12

Been looking for this answer for a while now. Finally found it on a different thread: https://stackoverflow.com/a/50783324.

Essentially you override the keyboard shortcuts for View:ZoomIn and View:ZoomOut with the ones for "Editor Font Zoom In" and "Editor Font Zoom Out". Note that you don't need remove the View-based shortcuts, just enter the Editor ones and they'll move to the top and override.

Works perfect.

https://code.visualstudio.com/updates/v1_24#_font-zoom-commands

Kudos to czen

score 1 · Answer 13 · answered Mar 19 '20 at 04:55

1

Version: 1.43.1 (user setup) Date: 2020-03-18T07:01:20.184Z Electron: 7.1.11 Node.js: 12.8.1 V8: 7.8.279.23-electron.0 OS: Windows_NT x64

Its under 'window zoom' in 'settings'

answered Mar 19 '20 at 04:55

score 0 · Answer 14 · answered Jul 18 '23 at 20:30

My settings with colours as IntelliJ

{
    "workbench.colorTheme": "Darkula",
    "security.workspace.trust.untrustedFiles": "open",
    "cmake.configureOnOpen": true,
    "redhat.telemetry.enabled": true,
    "editor.inlineSuggest.enabled": true,
    "java.import.gradle.java.home": "/Library/Internet Plug-Ins/JavaAppletPlugin.plugin/Contents/Home",
    "window.zoomLevel": -0.3,
    "debug.console.fontSize": 12,
    "terminal.integrated.fontSize": 12,
    "chat.editor.fontSize": 12,
    "editor.fontLigatures": false,
    "editor.fontSize": 16
}

Visual Studio Code change font size for file explorer tray?

14 Answers14

Linked