Reputation: 2899

Visual Studio Code change font size for file explorer tray?

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.

Upvotes: 289

Answers (19)

Juan Jzb

Reputation: 1

Open this file C:\Users\<username>\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\workbench.desktop.main.css

And modify these CSS classes:

.monaco-icon-label>.monaco-icon-label-container {
    // other styles...
    font-weight: 500; // in my case i used this because i just wanted to see it bold
}

Upvotes: 0

Alok Tripathi

Reputation: 1124

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,
}

Upvotes: 2

Ameen Maheen

Reputation: 2747

Go to Settings > Search "Window" or "Zoom" > Select the "Window" option > increase the zoom level as you desire.

Upvotes: 1

Oranit Dar

Reputation: 1745

Type CTRL+SHIFT+P inside your Visual Studio Code 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:

{
  // ... other part of your editor config ...
  "editor.fontSize": 16,
  "terminal.integrated.fontSize": 14,
  "window.zoomLevel": 1.4,
}

Try changing the sizes until it works for you.

Upvotes: 27

Lester Johnson

Reputation: 487

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"
}

Upvotes: 37

Kalpesh Dhotre

Reputation: 31

Thanks to Fernando Rodrigues for introducing

APC Customization UI++

vscode extension The solution works perfectly, but it disturbs the layout of the terminal window pane as well. Upon digging into settings, I found the following solution which only targets the VSCode File Explorer view pane:

"apc.stylesheet": {
  ".explorer-folders-view": "zoom: 1.17; transform-origin: 0 0;"}

Furthermore, the following settings can also be used to adjust font size and line spacing of the folder tree view:

"apc.font.family": "Sintony",  // changes font of Explorer tree, Menu, context menu etc in VsCode

"apc.listRow": {
  "lists": ["explorer-folders-view"],
  "fontSize": 13,
  "height": 21  // line spacing between folder tree

Adjusting the zoom level also makes the file icon clearer on a big screen. Thanks to Fernando Rodrigues for finding out those settings. Adjusting font size and spacing makes the explorer tree view very comfortable.

This revised solution Works PixelPerfect.

Screenshot of VSCode setting and File explorer view

Upvotes: 3

Fernando Rodrigues

Reputation: 56

There's a better solution if you don't want your whole screen to be zoomed in (just like I did).

You can change the CSS inside the code using an experimental extension called APC.

Download the extension
Go into user settings.json and put this:

"apc.stylesheet": { ".pane-body": "zoom: 1.123; transform-origin: 0 0;", }

Upvotes: 0

sara

Reputation: 176

In settings.json increment zoomLevel

{
    "window.zoomLevel": 2
}

Upvotes: 3

awaik

Reputation: 12345

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
}

Upvotes: 0

Robert Yeomans

Reputation: 376

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 + -

Upvotes: 2

Eric

Reputation: 10658

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}

Upvotes: 6

theCaptainXgod

Reputation: 233

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.

Upvotes: 4

Bojan

Reputation: 986

You can try:

Ctrl + + for zoom in

Ctrl + - for zoom out

Upvotes: 18

user11838067

Reputation:

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'

Upvotes: 1

davfive

Reputation: 383

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

Upvotes: 1