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

Visual Studio-CodeVscode Settings

Visual Studio-Code Problem Overview


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). enter image description here

Image Credits: (https://code.visualstudio.com/images/codebasics_hero.png)

Visual Studio-Code Solutions


Solution 1 - Visual Studio-Code

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

Solution 2 - Visual Studio-Code

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"

SideBar on the left

Solution 3 - Visual Studio-Code

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: https://stackoverflow.com/questions/41874426/moving-panel-in-visual-studio-code-to-right-side/44468306#44468306)

Here's the bottom/right toggle button for VS Code Panel:

enter image description here

Once I click on this button, the Panel moves to the right.

enter image description here

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:

enter image description here

Now, if you want to move the Panel back to the bottom, click on the toggle bottom/top button again.

Solution 4 - Visual Studio-Code

Click menu option View > Appearance > Move Side Bar Right or in settings.json:

"workbench.panel.defaultLocation": "right"

Solution 5 - Visual Studio-Code

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".

Solution 6 - Visual Studio-Code

In version 1.55.2.

Go to View --> Appearance --> Move Panel Rightenter image description here

Solution 7 - Visual Studio-Code

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:enter image description here

Solution 8 - Visual Studio-Code

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

enter image description here

Solution 9 - Visual Studio-Code

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 + `"

Solution 10 - Visual Studio-Code

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)

Solution 11 - Visual Studio-Code

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 in the bottom side

terminal at the right side terminal in the right side

Solution 12 - Visual Studio-Code

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

Solution 13 - Visual Studio-Code

"workbench.panel.defaultLocation": "right",

Solution 14 - Visual Studio-Code

"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.

enter image description here

Solution 15 - Visual Studio-Code

As sample as this from the GUI. View->Appearance->Move Side Bar Right

enter image description here

Solution 16 - Visual Studio-Code

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.

Solution 17 - Visual Studio-Code

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.

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

Solution 18 - Visual Studio-Code

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

Solution 19 - Visual Studio-Code

Go to view, then appearence. Then select move panel bottom.

Solution 20 - Visual Studio-Code

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",

Solution 21 - Visual Studio-Code

screenshot of vscode with terminal on the right side

This answer is for people that just want their terminal on the right side (shown above), and don't care about the panel.

  1. Show vscode's Command Palette with keyboard shortcut command + shift + p or ctrl + shift + p
  2. Type in "terminal editor"
  3. Choose option that says Terminal: Create New Terminal in Editor Area to the Side

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
Question1c.View Question on Stackoverflow
Solution 1 - Visual Studio-CodedcastroView Answer on Stackoverflow
Solution 2 - Visual Studio-CodeForresView Answer on Stackoverflow
Solution 3 - Visual Studio-CodemvvijeshView Answer on Stackoverflow
Solution 4 - Visual Studio-CodeStefanoView Answer on Stackoverflow
Solution 5 - Visual Studio-Codeuser8079583View Answer on Stackoverflow
Solution 6 - Visual Studio-CodeManishView Answer on Stackoverflow
Solution 7 - Visual Studio-CodeNickersFView Answer on Stackoverflow
Solution 8 - Visual Studio-CodeMel MichaelView Answer on Stackoverflow
Solution 9 - Visual Studio-Codesh6210View Answer on Stackoverflow
Solution 10 - Visual Studio-CodeVonCView Answer on Stackoverflow
Solution 11 - Visual Studio-CodepulankitView Answer on Stackoverflow
Solution 12 - Visual Studio-CodeNickosView Answer on Stackoverflow
Solution 13 - Visual Studio-CodeDinesh JinjalaView Answer on Stackoverflow
Solution 14 - Visual Studio-CodematrixView Answer on Stackoverflow
Solution 15 - Visual Studio-CodeDheeraj PalagiriView Answer on Stackoverflow
Solution 16 - Visual Studio-CodesadityaView Answer on Stackoverflow
Solution 17 - Visual Studio-CodeMarkView Answer on Stackoverflow
Solution 18 - Visual Studio-CodeDenis HoweView Answer on Stackoverflow
Solution 19 - Visual Studio-CodemanguView Answer on Stackoverflow
Solution 20 - Visual Studio-Codeweiya ouView Answer on Stackoverflow
Solution 21 - Visual Studio-CodejaquinocodeView Answer on Stackoverflow