Activity Bar width in Visual Studio Code

Question

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:

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.

Commensurable

Answer 1

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

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

Toxicant

FYI about that customize UI extension, is that in the reviews people note of it forcing a VS Code reinstall if attempting to use it with the later versions (after 1.73). I assume it will be fixed later, but I was forced to reinstall to fix my VS Code after attempting to use it. I'm currently on 1.77, which it doesn't work with that also. – Pooh

readers might also want to take a look at github.com/drcika/apc-extension#apcactivitybar (I have no affiliation) – Melamine

Answer 2

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

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

Lemmuela

very nice...but not respecting themes – Hewet

the file change count goes away. No point in showing it all if it gives no visual meaning – Define

This would have been nice as it takes up lesser space than Customize UI and integrates into the status bar. But I don't recommend it because it can only show the five standard icons. It doesn't show icons contributed by extensions. There's a setting to configure additional icons, but I need the extension to automatically pick up all icons! I can't be expected to configure and reconfigure it whenever I add/remove extensions. – Impostume

Thanks, can't believe I'm so late to know this! – Rombert

Answer 3

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.

Zebrawood

this extension makes so much sense to me – Lampley

FYI about that customize UI extension, is that in the reviews people note of it forcing a VS Code reinstall if attempting to use it with the later versions (after 1.73). I assume it will be fixed later, but I was forced to reinstall to fix my VS Code after attempting to use it. I'm currently on 1.77, which it doesn't work with that also. – Pooh

As of Nov 2022, Customize UI doesn't work anymore (#156), and there's some reports that trying to install it will break your VS Code (#174). – Bascule

Answer 4

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.

Nannienanning

This is a good alternative for those who love keyboard shortcuts. I had to go with Ctrl-Alt-B as Alt-B is mapped to Git Blame over here and Ctrl-Shift-B is taken too. Tip: Ctrl-B toggles the sidebar itself. – Impostume

Answer 5

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

Worry

Answer 6

For anyone who previously used the Customize UI extension which no longer works, there's now a replacement: Apc Customize UI++

It provides a similar level of customization, allowing changes that VS Code otherwise doesn't allow.

With VS Code on Windows, VS Code must be run as administrator to enable this new extension, but once it's enabled VS Code can be run normally.

Peculiar

Confirmed this one works well. – Wauters

Answer 7

1. Install Apc Customize UI++ extension and restart vscode;
2. Add the following options to user settings:

{
    "apc.activityBar": {
        "size": 36, // Height (when top/bottom) or width (in default position)
        "itemSize": 36, // Size of items within the bar (default: size)
        "itemMargin": 3 // Margin between two items (default: 3)
    },
}

Now, the activity bar will look like this:

Jasisa