Activity Bar width in Visual Studio Code

user_7589898 0
Viewed 21050

Is there a way to selectively change the width of the Activity Bar in VSCode (v. 1.14)? I have a 1366×768 screen where every pixel counts, so I would like to make this bar narrow and icons smaller, by at least 50%. In comparison to vertical OS interface elements, e.g. Windows 10 Taskbar or Plasma 5 panel it looks monstrous and out of place:

enter image description here

I've been also trying to find a solution for the Insider version of VSCode, but apart from just hiding it I haven't discovered anything relevant yet.

I have "window.zoomLevel": 0 set in settings.json.

visual-studio-code user-interface ide
5 Answers

I recommend the excellent extension Activitus Bar. It recreate the activity bar buttons on the status bar:

enter image description here

Then, you just hide this enormous, gigantic activity bar. Happying code!

user_18826440

EDIT (03/03/20): You can also use the customize-ui addon that allows more fine-grained font sizes and other goodies

You can also use the negative zoom trick in settings.json:

{
  "window.zoomLevel": -1,
  "editor.fontSize": 13,
  "terminal.integrated.fontSize": 16,
}

The whole editor will get smaller so you need to compensate editor.fontSize and terminal.integrated.fontSize

VSCode Zoom Level preview

This allows for smaller activity bar (unfortunately it acts on everything (icons size, font-size ...)) but I much prefer this than the defaults.

user_54122730

Not solving your exact question but another good solution...

  • Install the Customize UI extension.
  • In Settings (UI) go to the Customize UI settings and set Activity Bar to "bottom".
  • Completely close VSCode and reopen.

sidebar on bottom of vscode

user_251970

Not exactly what was asked, but instead of hiding it completely, I added a keyboard shortcut to be able to toggle the bar.

On macOS: Code > Preferences > Keyboard shortcuts > search for: Toggle Activity Bar Visibility

On Linux: File > Preferences > Keyboard shortcuts > search for: Toggle Activity Bar Visibility

Alternatively, you can get to Keyboard shortcuts by pressing ctrl + k and then ctrl + s.

I set it to Option + B just like Command + B for the Side Bar toggle and show it just when I need something there.

user_13067090

Wanted to add more to Akelian answer:

On Windows/Linux - File > Preferences > Settings
On macOS - Code > Preferences > Settings

{
  "window.zoomLevel": -1,
  "editor.fontSize": 13,
  "terminal.integrated.fontSize": 16,
  "workbench.activityBar.visible": false,
}

Setting false to "workbench.activityBar.visible" removes the sidebar completely

https://code.visualstudio.com/docs/getstarted/settings

user_44088450
Related