I have researched like the whole internet about Visual Studio Code and didn't find any information about workbench (explorer with the project directories and files) entries line height.
How can I change the line height in the workbench?
I am asking, because this standard line height in Version: 1.65.2 is too huge for the project with many directories and files. I want to see relevant directories and files in the right structure without continuing scrolling, so I have to decrease this line height.
It is impossible out of the box, but possible with the extension "Customize UI".
Link to the extension: Customize UI for VS Code
Last Update info as of 2022-11-16:
More Info
Version 0.1.65
Released on 6/6/2019, 7:47:09 AM
Last updated
9/25/2022, 3:51:30 AM
Publisher iocave
Unique Identifier iocave.customize-ui
Feature list from the Customize UI README:
This experimental extension allows customizing VSCode user interface beyond what's
normally possible, such as:
Changing interface fonts
Inline titlebar on macOS
Activity bar below sidebar
Custom stylesheet rules conveniently specified in settings.json
Related
I have a problem with VSCode.
I don't like that font VSCode is using for system, I don't know how to change VSCode sans-serif(system) font. I tried toggle developer tools, but you know it refreshes all stylesheets when you close/open it. Any solutions?
To change your Visual Studio Code Font:
Navigate
File -> Preferences -> Settings -> Commonly Used
Scroll down to and find Editor: Font Family
The default value should be Consolas, 'Courier New', monospace change this with your desired font.
This should automatically change your font in Visual Studio Code
Find workbench.desktop.main.css and edit it. The path varies based on your installation.
Local: C:\Users\{username}\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench
Global: C:\Program Files\Microsoft VS Code\resources\app\out\vs\workbench
Search for the .windows solo class. Ignore entries with multiple classes.
Edit the value for font-family to set the font you want to use.
There are two entries for the .windows class. Make sure to edit the one with the font-family property. Ignore the --monaco-monospace-font property.
Keeping the CSS minified, save the file.
Restart VS Code.
Example:
// Original
.windows{font-family:Segoe WPC,Segoe UI,sans-serif;}
// Modified
.windows{font-family:Comic Sans MS,serif;}
Source: https://dev.to/kunaltanwar/how-to-change-vs-code-ui-font-in-windows-56mj
Note: You may need to do this every time VS Code updates since it will be flagged as corrupted.
https://code.visualstudio.com/docs/supporting/faq#_installation-appears-to-be-corrupt-unsupported
EDIT: Clarification on which property to target since there are multiple .windows classes.
I am working on a .Net Core application and I keep running into this problem where I get all sorts of random issues appearing in the Problems window in VSCode for "__virtual" files. There are no problems in the actual razor page (.cshtml) and everything is working how we would expect. Is there a way in VSCode to mass ignore all problems from __virtual files?
This started to happen to me after the latest update of Visual Studio Code.
My solution was to configure file association for .razor__virtual.html files into text
Open visual studio code
Click Settings icon in the left bottom and click Settings
In the search box, search for Files: Associations (Copy-paste this)
Click [Add Item] button and enter **/*.razor__virtual.html for key, text for value.
It should look like this,
Done!
I am relatively new to VS Code and I think I must have accidentally changed a setting.
VS Code used to clearly display all sub-folders below and indented to the right from their parent folders, but something has changed and now my sub-folders display somewhat like breadcrumbs in the File Explorer (see image posted below).
I've tried looking through the Keyboard Shortcuts and 'Tips and Tricks' doc for VS Code as well as googling and searching through Stack Overflow, but can't seem to figure out what the command is to change this setting. Any thoughts on how to fix this would be really helpful.
This is a fairly newer change to VSCode that came on the November 2019 (version 1.41)
The setting you are looking for is "compact folders". You can get there by going to:
File → Preferences → Settings → explorer.compactFolders and then unchecking the box.
From November 2019 (Version 1.41) release notes:
Compact folders in Explorer
In the File Explorer, we now render single child folders in a compact
form. In such a form, single child folders will be compressed in a
combined tree element. Useful for Java package structures, for
example.
Setting explorer.compactFolders controls this behavior. By default,
this setting is turned on.
I would like to have an additional feature in Visual Studio Code - essentially the "Scope to This" from the full Visual Studio Solution Explorer.
It is basically a context menu (right click) entry in the File Explorer of Visual Studio Code - which then should limit which files and folders are displayed.
Is such a thing possible with a Visual Studio Code Extension?
I never built an extension for VS Code before and would like to know if this is even possible or if I would just waste my time.
According to the API docs, there is no way to filter visible files in the Explorer like it can usually be done with the files.exclude setting. However, it is possible to open another folder with the workspace.openFolder complex command. This will probably also close all opened editors, and forget about the original workspace root path.
Your extension would need to remember the initial root path and opened editors to undo this "Scope to This" menu, and reopening everything every time could cause quite some lag.
You can't customize the normal explorer view.
However, you can do something like this with custom views. It allows you to create a new explorer view that can list what you want and behave as you want.
For an example implementation, check the vscode-code-outline.
If you can add a context menu entry separately too.
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",
},