How to change font size in VS Code sidebar? - visual-studio-code

Querying for fontsize in User Settings window yields only settings for:
editor panes,
suggest widget,
markdown preview,
integrated terminal
As you can see below:
Doing the same for sidebar gives even poorer results:
Having fonts of different sizes in editor panes and sidebar looks... let's settle with: not too nice. Have I just found the greatest omission of this awesome tool?

Just want to add to the discussion, If you set:
"window.zoomLevel": "your number",
In my case I started with zero, you can use that as sort of a baseline:
"editor.fontSize": 14,
"editor.tabSize": 2,
"terminal.integrated.fontSize": 14,
"window.zoomLevel": 0,
"[Log]": {
"editor.fontSize": 14
},
And then tweaked until I was happy.
E.g. you want to increase the sidebar font size keeping editor font size unchanged: set "window.zoomLevel": 0.5 and "editor.fontSize": 18. Look at the result. Play with both values to get the result you like.

Mihai Chelaru's answer presents a way to do more than just adjust the sidebar's font size. This, however, comes with a price of a bit of fiddling, possibly more than you'd be ready for, if the only thing you were interested in was the simple act of changing the sidebar's font size. So here's a simpler solution.
Just zoom the whole VS Code's UI in or out with CTRL++ or CTRL+- respectively and than adjust font sizes we do have control over in settings.json file, i.e.:
editor.fontSize,
editor.suggestFontSize,
markdown.preview.fontSize,
terminal.integrated.fontSize
so everything matches. That's it.

This has been a feature request for some time. The short answer is right now there's no VSCode setting that allows you to customize the sidebar font size. There is a hacky workaround solution proposed by #lindesvard in the same issue thread that involves using the Custom CSS and JS Loader extension to load in a custom CSS file that modifies the sidebar styling if you're willing to experiment with it.
To get this working follow the Getting Started section in the extension details, then add URLs to your custom files to the "vscode_custom_css.imports": [""] array. (Note that on Windows mine looks like the following: "vscode_custom_css.imports": ["file:///C:\\dev\\vscode-styling.css"])
Below are before and after adding the CSS mentioned by #PSVapour in a later comment:
Note that this also affects the command palette font.

Apart from #Mihai Chelaru's answer, I found another plugin which helped me dealing with this issue. The name of the plugin is CustomizeUI.
CustomizeUI relies on the Monkey Patch Extension to inject custom javascript in VSCode. Here is the settings I use (in settings.json) for my Mac:
"customizeUI.stylesheet": {
".explorer-viewlet .mac": "font-size: 1.2em !important; overflow: auto; border-left:none!important",
},
Again, this plugin is meant to do more than just changing the font size of the sidebar. But it has some minor advantages over Custom CSS and JS Loader. Like:
It won't show Unsupported on the title-bar or won't show any error message like Your installation is corrupted.
You do not have to reload settings every time VS Code is updated.

You can zoom in and zoom out:
zoom in:
Ctrl + +
zoom out:
Ctrl + -

Change the font size with keyboard shortcuts using the FontSize Shortcuts
plugin. On a Mac, I am able to focus on the terminal or the editor and change the font size of those areas independently of each other.
https://marketplace.visualstudio.com/items?itemName=fosshaas.fontsize-shortcuts

Mihai's answer above works well. He notes that the CSS from here has the side effect of changing the command palette font too.
I only wanted to specify the font size for the debugger sidebar tab. At the time of writing (VS Code version 1.74.3), this custom CSS instead affects only the debugger sidebar tab:
.debug-pane,
.debug-pane .scope,
.debug-pane .expression {
font-size: 14px !important
}

Related

How to increase max length of line in VSCODE editor?

I have an issue where my code-lines wrap to the next line too soon and there's a weird empty margin on the right side of my editor, which takes up useless space. I thought it was the minimap at first, but it's not that. The size remains the same regardless of the editor window size.
I've probably added it by accident through some shortcut keys but can't find anything related to it from the settings.
Looks like you have the Dart extension installed. If so, change Dart: Line Length to a higher number (9999999 if you want). 0 might also work to disable that option.
As it says, you might also need to change the rulers in the dart section of settings.json
enter image description here
Open Extensions on the menu on the left or File menu.
Then click on the extension settings button.
Change the line length for the extension you are working with.

How to change font-size of vscode developer tool

The default font size of vscode developer tool (ctrl+shift+i) is too small for high dpi monitor and I want to make it bigger.
I do not find exact solution for it and I tried following related operations, but none of them works:
1. Set Window: Zoom Level
This configuration change size of everything except for the debugger tool, wired.
2. Set Editor:Font Size and Debug>Console: Font Size.
Still not affects the debugger tools.
3. Directy ctrl+scroll up/down using mouse
Not working. But works for editor if corresponding switch is on.
4. Configuration inside Developer tool.
Found no entry.
maybe you can try this.
...\Microsoft VS Code\resources\app\out\vs\workbench\workbench.desktop.main.css,
modify the font-size which is 11px to what you want .
(but it just effects the fonts in interface, not the variables in debug)
and is that ctrl+'+' not useful?
enter image description here

How do i change only the font size of comments in VS CODE?

How do I change only the font size of comments in VS CODE ?
is it possible to only change the font size of comments in vscode ?
You can use 'Ctrl and +' or 'mousewheelup and +' at one time to zoom in your code and zoom out.
There are also numerous stunning extensions in VS CODE.
You can search there like the is an extension that will make your comments colorful named "Colorful comments". Just search and choose any extension of your choice.
If you want to change only font size, there is an option in the settings of VS code.

Visual Studio Code: change debug panel's font size and font family and debug console input as well

Is there a way to change the debug panel's font size and appearance in VS Code? I'm referring to the side panel where variables and their values are showed when debugging a program.
Note that I want to change only its font size, not that of the entire editor.
I've come across other similar questions here in Stack Overflow, but the solutions provided required to change the zoom level of the entire editor (and thus of the debug panel too), then adjust the editor's font size. However, as I mentioned before, that's not what I'm looking for. I've searched through the settings but couldn't find anything at all. To me, it seems like a very basic feature for a text editor to have, so I can't believe there's no way to do that.
I'm using VS Code 1.40.1 on Linux
Paste these into your settings.json file USER section and change values to your liking.
Note that there is no fontWeight for debug console, but you can state the weight in the fontFamily, like in the example below.
lineHeight seems to be 1/3 bigger than fontSize by default, so that might be a good value to start with.
"debug.console.fontFamily": "Cascadia Code Light",
"debug.console.fontSize": 15,
"debug.console.lineHeight": 21,
I would assume the ability to change the debug's views' font/fontSize is coming as part of the ability to move those views to the Panel (See VS Code move debug tab (left panel) to bottom).
Added:
debug.console.fontSize
debug.console.fontFamily
debug.console.lineHeight
Previously, the size didn't apply to the debug console input. To be fixed in v1.45, see https://github.com/microsoft/vscode/issues/90714 and https://github.com/microsoft/vscode-docs/blob/vnext/release-notes/v1_45.md#notable-fixes.strong text
I have 1.55.1 on Linux and still don't see an option for font size in the debug variables panel (which, as originally asked, is not the debug console). So to adjust the font size in the debug variables panel independently, use the Zoom feature to adjust the entire VS code application, and then use the available font size settings for Editor, IntegratedTerminal and DebugConsole to unzoom those three back to the desired smaller fontsize.

VS Code customize sidebar

Is there any way to customize sidebar in VS Code? In particular, I want to change the font size. Is there a user setting for that? Or, maybe, I can edit it somehow via stylesheet since it's an Electron app, like in Atom?
There are no user-defined stylesheets for vscode.
The only ways to scale various parts of the UI currently are through the overall zoom level (window.zoomLevel) and the editor's font size (editor.fontSize).
I created a feature request for this on the repo.
As mentioned in other answers there are extensions which allow injecting custom CSS, you should be careful using these as they directly manipulate the source code of VS Code which could lead to problems elsewhere and any modifications could break when you update.
I Found a way to change the font of Visual Studio Code Window.
First, open command Pallete, and type "Toggle Developer Tools"
This will open "Chrome Inspector".
Select any text of sidebar of app.
Search .monaco-shell class in "styles" tab at right side inspector ( Where show every styles of the current document ), then the font-family attribute.This is tab and stylesheets.
In workbrench.main.css hit right click and click in "Open Soruce Panel" Show like this
Format the css Code with this icon.
ctrl+f for found font-family attribute again, 'cause the format redirect to end of css document, and get .monaco-shell class like this in ~6371 line.
Change this font ( I have change to Droid sans Mono font ), but you change to you want.
Why i'm not change in the real document css
'Cause, when i changed the font family in the real document css ( C:\Users\${user}\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\workbrench.main.css) generate a error saying "Vscode have a error, please reinstall the program" or similar
When generate a actualization of application, the font family declareated will deleted, and the document css is´t a pretty code.
This process change every fonts of visual studio code application (not include the editor font )
I found it very effective to use the general zoom settings (it's somewhere in that huge settings window). This adjusts the zoom level of the entire app. Tweak it till you like the size of your explorer window, then adjust the settable editor font to be readable with that zoom level. I three parallel code windows of 80 columns plus the explorer on a good 17" laptop monitor, readable if you are OK with 8pt code font (which is actually 11 point font zoomed two notches down).
Although there is no direct way of customize the sidebar from settings as #Daniel Imms mentioned in his answer, but I found 2 plugins which helped to resolve this issue. You can either one of them if you want.
1. Custom CSS and JS Loader
In Custom CSS and JS Loader plugin, you need to create a custom css and then this plugin will inject that code directly in electron-browser/index.html(as VS Code is an electron based editor). I use this CSS in my Mac:
".explorer-viewlet .mac": "font-size: 1.2em !important",
2. CustomizeUI
CustomizeUI relies on the Monkey Patch Extension to inject custom javascript in VSCode. Here is the settings I use (in settings.json) for my Mac:
"customizeUI.stylesheet": {
".explorer-viewlet .mac": "font-size: 1.2em !important; overflow: auto; border-left:none!important",
},