How Can I Remove the Visual Studio Code Top Bar? - visual-studio-code

How to hide the whole top bar?
I cannot find online how to hide/show it.

The top bar is called Command Center. To hide it:
Open VS Code settings with Ctrl+, (or ⌘+, for MacOS)
Search for "Window: Command Center" and turn the settings off

Related

What is the name this part of Visual Studio Code and how can I hide it?

I have this bar (marked below) on the right side of my editor area. I can't see any setting in view tab that could hide it. Is there setting that can hide it?

How to add an icon in Activity bar of Visual Studio Code that will trigger a keyboard shortcut

Is it possible to add an icon in Activity bar of Visual Studio Code that will trigger a keyboard shortcut like Ctrl+Shift+P. Or executing a command from Command Palette.
Only extensions can add an icon in the activity bar (officially called a "views container"). They cannot trigger a command, though. See the official documentation here:
https://code.visualstudio.com/api/extension-capabilities/extending-workbench
https://code.visualstudio.com/updates/v1_23#_custom-activity-bar-views
However, maybe these extensions might fit your needs, they allow creation of custom commands in the status bar or the editor menu bar:
https://marketplace.visualstudio.com/items?itemName=seunlanlege.action-buttons
https://marketplace.visualstudio.com/items?itemName=jerrygoyal.shortcut-menu-bar

Visual Studio Code - icons in Activity Bar have disappeared

Earlier this week I installed the latest release (May 2018) of Visual Studio Code and ever since then all the icons in the Activity Bar (i.e. the long thin bar on the far left of the window) fail to display. I always get the Explorer icon but after that the only one that does display is whatever I currently have open in the sidebar.
Perhaps some screenshots might help explain:
I've searched high and low in Settings to try and find how to get them all to display but I can't find anything. Can anyone help?
I'm on macOS High Sierra 10.13.5 by the way.
Right click on the activity bar itself and select whatever you want have on the activity side bar. if for some reason you don't see the activity bar, go to
View-> Appearance ->Show Activity bar
"Try right clicking the Activity Bar itself. If I right click it I get a list of the icons to show/hide."
In VSCode version 1.59 (Windows 10), the setting of controlling the visibility of activity bar is:
Settings -> User >-> Workbench -> Appearance -> Activity Bar -> "Visible
Controls the visibility of the activity bar in the workbench"
See the screenshot below:
Click on menu, if you don't have the top menu click the alt key the menu will appear. On the menu click view then click appearance, then click show activity bar. If all the activity bar does not show, go back to view menu to bring them back one by one. To keep an icon from disappearing right click on each activity bar, look for keep, click it. That will make it stay.
If you are a windows user and have the latest version of visual studio code
1)First go to the view section in the upper top of the visual studio code.
2)GO to preferences
3)Go to show Activity Bar and click on it.
This is the only fix that worked for me on Mac:
Click "View" > "Open view...". Search for the extension. From there you can open the extension in a side panel.

How do I move the panel in Visual Studio Code to the right side?

It's at the bottom by default.
For example in the following image ,panel(Section D) is at the bottom, instead I want it to move to the rightside i.e., in the area where README.md editior shown in Editor Groups(Section C).
Image Credits: (https://code.visualstudio.com/images/codebasics_hero.png)
As of October 2018 (version 1.29) the button in #mvvijesh's answer no longer exists.
You now have 2 options.
Right click the panel's toolbar (nowhere else on the panel will work) and choose "move panel right/bottom":
Or choose "View: Toggle Panel Position" from the command palette.
Source: VSCode update notes: https://code.visualstudio.com/updates/v1_29#_panel-position-button-to-context-menu
For people looking for an answer (on how to move the side panel):
You can press
ctrl + , (Or cmd + , on OSX)
and add the following option to your user settings JSON file:
"workbench.sideBar.location": "right"
I'm using Visual Studio Code v1.24.0 on a Mac.
By default, the Panel will appear on the bottom (You can change the default as well. Please refer to #Forres' answer: Moving Panel in Visual Studio Code to right side)
Here's the bottom/right toggle button for VS Code Panel:
Once I click on this button, the Panel moves to the right.
Moving it back is a little tricky though. As you can see, some of the buttons are hidden. This is because the width of the panel when it's aligned right is too small. We need to expand the column to see all the buttons.
This is how it'll look upon expansion:
Now, if you want to move the Panel back to the bottom, click on the toggle bottom/top button again.
Click menu option View > Appearance > Move Side Bar Right or in settings.json:
"workbench.panel.defaultLocation": "right"
In version 1.55.2.
Go to View --> Appearance --> Move Panel Right
Click menu option View > Appearance > Move to Side Bar Right. Once side bar moves to right, option "Move Side Bar Right" changes to "Move to Side Bar Left".
As of June 2019 this setting can be found through searching 'Panel' - if you want to change the default there is an option for it as shown in the screenshot:
For Visual Studio Code v1.31.1, you can toggle the panel session via the View menu.
Go to the View Menu.
Via the Appearance option, click on Toggle Panel Position
Hope this will help someone.
-> open to keyboard shortcut
-> search for "workbench.action.togglePanelPosition"
-> assign your desired shortcut
I've assigned keybinding "cmd+`"
{
"key": "cmd+`",
"command": "workbench.action.togglePanelPosition"
}
now I can toggle the terminal by pressing "cmd + `"
VSCode 1.42 (January 2020) introduces:
Panel on the left/right
The panel can now be moved to the left side of the editor with the setting:
"workbench.panel.defaultLocation": "left"
This removes the command View: Toggle Panel Position (workbench.action.togglePanelPosition) in favor of the following new commands:
View: Move Panel Left (workbench.action.positionPanelLeft)
View: Move Panel Right (workbench.action.positionPanelRight)
View: Move Panel To Bottom (workbench.action.positionPanelBottom)
You can do the same in insider's edition, There is an option on right top corner to switch to the panel to sidebar https://code.visualstudio.com/insiders/
terminal at the bottom side
terminal at the right side
With v1.64.2 they have brought back the command View: Move Panel Right (or Left). You can put the Panel (which typically has the Terminal/Output/etc. in it) as a vertical column on the left or right side - next to the Side Bar or Side Panel if you wish.
They are working on a fix for the change wrought by v1.64, should be in Insiders v1.65 02/08/2022.
Just use the View: Move Panel Right/Left/Bottom command from the Command Palette.
[Outdated answer, see above.]
As of Stable v1.64 the setting "Wokbench.panel.defaultLocation": "right" will no longer work.
Replacing Panel Location
As mentioned above, the new Side Panel provides similar functionality
as moving the Panel to the left or right, yet improves on this by not
forcing the move of the original panel. Along with view drag and drop
between panels, the new Side Panel is replacing the option to move the
bottom Panel.
In light of that, we have deprecated the
workbench.panel.defaultLocation setting as well as the Move Panel...
commands in favor of similar commands Move Views From Panel To Side
Panel (workbench.action.movePanelToSidePanel) and Move Views From
Side Panel To Panel (workbench.action.moveSidePanelToPanel). The old
commands will remap to the appropriate new command providing the
similiar behavior. Though, we recommend updating your keybindings to
the new commands.
from https://github.com/microsoft/vscode-docs/blob/vnext/release-notes/v1_64.md#replacing-panel-location
This is in favor of using the new Side Panel, which can be in addition to the previous Side Bar (where the Explorer, SCM views traditionally are) and the Panel (where Terminal, Output, etc. traditionally are). So you can have 3 panel-types of views. See more at the v1.64 Release Notes: https://github.com/microsoft/vscode-docs/blob/vnext/release-notes/v1_64.md#new-side-panel
This answer is for people that just want their terminal on the right side (shown above), and don't care about the panel.
Show vscode's Command Palette with keyboard shortcut command + shift + p or ctrl + shift + p
Type in "terminal editor"
Choose option that says Terminal: Create New Terminal in Editor Area to the Side
I don't know since which version it change but the 1.11.2 has an option in View tab which can change the left bar to the right and vice versa
"Wokbench.panel.defaultLocation": "right"
Open settings using CTRL+., search for terminal and you should see this setting at the top. From the drop down below the settings explanation, choose right. See the screenshot below.
As sample as this from the GUI. View->Appearance->Move Side Bar Right
"workbench.panel.defaultLocation": "right",
Go to Command Palette from the wheel icon on the bottom left --> search and enter "settings" menu --> search "panel" in the search bar --> Select Default location as "right" instead of the "bottom".
Reload VS Code, and you're good to go.
By default, ⌘J toggles the (bottom) panel. If all your views are on the side panel, make ⌘J toggle the side panel by doing:
Code > Preferences > Keyboard Shortcuts > "Command+J" > Right-click > Remove Keybinding
Code > Preferences > Keyboard Shortcuts > View: Toggle Side Panel > Add Keybinding > ⌘J
Go to view, then appearence. Then select move panel bottom.
The panel opens on the right by default.
Note that this setting needs to be in a new folder to take effect.
If VSCode has opened the folder before, the panel will still use the old location.
"workbench.panel.defaultLocation": "right",

Is there a shortcut to hide the side bar in Visual Studio Code?

It'd be handy if there was a keyboard shortcut for hiding and showing the sidebar. Sublime has cmd+k+b and it's a quick way of gaining some screen real estate when you need it. Anybody know if this exists or if the user can add it manually to VS Code?
The command can be triggered via Ctrl+B on Windows and Linux or Cmd+B on the Mac.
There are 3 bars on the side, 2 left and 1 right:
the activity bar with 5 buttons
the primary sidebar toggled by clicking any of the activity bar buttons.
the minimap
All of these hotkeys and more (e.g. the terminal & output panel, Ctrl+J) are now visible through the View (Alt-V) and View>Appearance menus:
The activity bar has no toggle hotkey by default, but you can assign one like this:
{
"key": "ctrl+alt+b",
"command": "workbench.action.toggleActivityBarVisibility"
},
Or hide completely with "workbench.activityBar.visible": false
The sidebar toggle hotkey is Ctrl+B by default, but may be overridden by e.g. vim plugin, here's how to enforce or change it:
{
"key": "ctrl+b",
"command": "workbench.action.toggleSidebarVisibility"
},
The minimap can be hidden with "editor.minimap.enabled": false and toggled with editor.action.toggleMinimap since vscode 1.16.
And with the Sidebar-activity toggler extension, so you toggle both activity and sidebar together with one key mapping to sidebar-activity-toggler.toggleSidebarAndActivityBar
To Hide the 5 button Activity Bar we can now:
View -> Hide Activity Bar
This is in vscode 1.9, not sure which version it was introduced in.
As Benjamin Pasero's answer states you can use:
Ctrl+B on Windows and Linux
⌘ Cmd+B on the Mac.
but sometimes you have another keyboard shortcut with ⌘ Cmd+B, in my case I had it to format some React code. To reverse that you can use the following:
Code > Preferences > Keyboard Shortcuts (⌘+K ⌘+S) then search for B and disable the other shortcut command.
You can also change the it and put which ever shortcut you want, just search for Toggle Side Bar Visibility like this:
Just in case you be intended for hiding the right lateral "sidebar", also called minimap, there is no shortcut. But you can configure the settings with:
{"editor.minimap.enabled: false"}
One can also hide the activity bar with the following setting in settings.json:
"workbench.activityBar.visible": false
To hide/show the side bar:
Ctrl+B on Linux and Windows.
⌘ Cmd+B on Mac.
No need to edit Settings.json directly
Do the following:
Open the Keyboard Shortcuts by pressing ctrl+k & ctrl+s
Search: "Toggle Activity Bar Visibility"
Enter the keyboard shortcut
Done!
Activity bar visibility in visual studio code
Mac users,
⌘ + B or
⌘ + 0 - Worked Perfectly
In the VS code version 1.43, you can hide or show the side menu or activity bar by going under the 'VIEW' tab in the nav bar in the top margin of VS CODE(called the 'Menu Bar'). Go to View => Appearance, there you can check or uncheck different nav bars to show/hide each one.
If you have the top bar (Menu Bar) currently hidden press 'alt' key to bring it back then follow above instructions to check it to keep it there permanently if desired.