462

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)

6
  • The backcolor of scrollbar not is solid and the result is ... ![enter image description here](i.stack.imgur.com/pTmzS.png)
    – MCunha98
    Jan 24, 2018 at 14:10
  • 4
    You should update this question to accept the @dcastro 's answer. The current accepted answer is no longer valid. Jan 22, 2019 at 17:31
  • Also see stackoverflow.com/a/69329503/836330 for creating another panel, like the Side Bar but on the opposite side of your current Side Bar - and separate from the Panel.
    – Mark
    Sep 25, 2021 at 19:54
  • As of v1.64, the (bottom) Panel and the Side Panel stay where they are and you move "views" (debug, problems, output, terminal, search) between them.
    – Denis Howe
    Feb 8, 2022 at 18:44
  • 1
    View header > right-click > Move Views to Side Panel
    – Denis Howe
    Feb 10, 2022 at 1:12

21 Answers 21

948

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

15
  • 87
    It is also worth mentioning that the right click must be performed on the toolbar of the panel. (Clicking anywhere else won't help.) Nov 20, 2018 at 12:11
  • 15
    How annoying. Constant changes. Nov 26, 2018 at 2:40
  • 7
    Thank you! This was driving me nuts. Why did they take the button away in 1.29.1? It was consistent with Chrome's dev tools before and now it's not.
    – colefner
    Nov 28, 2018 at 0:42
  • 12
    @colefner To remind you that you are using a Microsoft product: it ain't broke, but they sure as heck will go ahead and fix it.
    – mkvlrn
    Nov 28, 2018 at 19:09
  • 12
    @shashwat Yes, open Keyboard Shortcuts and search for workbench.action.togglePanelPosition. You can add a keyboard shortcut that'll toggle it back and forth. Jan 4, 2019 at 16:44
165

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

5
  • 26
    OP refers to the bottom panel, not the left sidebar.
    – steph643
    Aug 3, 2017 at 7:41
  • 7
    @steph643 OP was not clear in his subject line which panel he was referring too. Though his question clarified that nicely, it is the subject line that we see on Google search results. This answer was the answer to the question that I had. Too often it is forgotten that for the masses looking for answers, it is Google leading us around by the nose until we find somewhere that the right answer hasn't been denied us by some heavy handed and short sighted mod because it didn't properly stand at attention and salute their astuteness. Nov 16, 2017 at 17:28
  • @forres, is it possible to make panels floating and move them on to a separate monitor? This is my usual setup when working with VS - code on left, all the panels on the right. Changing the anchor (left / right) of the sidebar does not change how much text editor is visible
    – Darius
    Jan 9, 2018 at 6:25
  • 5
    I agree with @hawkeyegold - while the answer clearly does not answer the OPs intent, it was incredibly helpful since I also googled this question while having the exact same question as Forres - wanting to move the workbench side bar. Many thanks! Oct 4, 2018 at 8:06
  • 9
    downvoted because this answer is confusing and clogs up seeking correct answer. Author asked how to move Panel, not side panel. Correct answer belongs Stefano: "workbench.panel.defaultLocation": "right"
    – Barabas
    Oct 24, 2019 at 12:37
113

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:

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.

7
  • 6
    this so confusing. the bottom is just hidden and there's another that looks just like it. bad UX Jul 14, 2018 at 20:46
  • 1
    thank you very much for hidden buttons :D It really saved my time much
    – Ken Block
    Oct 12, 2018 at 6:41
  • 15
    You can also open then command palette and use View: toggle panel position Nov 13, 2018 at 1:06
  • 37
    The icon doesn't seem to be there anymore for me. Neither when the panel is at the bottom, nor when it's at the right. Even when the panels have enough width. I need to right click on the panel header to make it move right or bottom. Which sucks.
    – oyalhi
    Nov 26, 2018 at 16:37
  • 4
    @oyalhi, the correct answer with latest Visual Studio Code (Version 1.32.3) seems to be `View -> Appearance -> Toggle Panel Position", like what @protoEvangelion mentions.
    – Subhash
    Mar 20, 2019 at 22:14
64

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

"workbench.panel.defaultLocation": "right"

4
  • OP is referring to the bottom panel, not the workbench panel. The workbench panel is what contains the file explorer, extensions, etc. Unfortunately they're both called ___ panel so it's easy for confusion to happen.
    – Jason
    Aug 9, 2018 at 17:42
  • 6
    I think that the one you are thinking of is actually workbench.sideBar.location. Unless I messed up when copying my comment is correct, anyway I then noticed now there is a new button to move it to the side and back to the bottom.
    – Stefano
    Aug 10, 2018 at 10:41
  • 2
    Best answer on here. It moved my terminal (bottom) panel to the right just like I needed. Exactly as the op requested. Thanks! Jan 9, 2019 at 15:02
  • It requires to close the existing terminal first, and do CTRL + ` to show them on the right side May 16, 2019 at 3:28
37

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

2
  • This no longer exists
    – pmiranda
    Jun 27, 2019 at 14:50
  • 4
    This has moved to View > Appearance > Move Side Bar Right/Left Nov 5, 2019 at 16:37
36

In version 1.55.2.

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

2
  • 1
    this works for me, short and nice! Nov 13, 2022 at 23:09
  • Works for version 1.62 too.
    – Debashish
    Dec 10, 2022 at 9:06
13

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

2
  • 1
    The settings in JSON is "workbench.panel.defaultLocation": "right"
    – williamli
    Aug 14, 2019 at 1:40
  • Precisely what I was looking for! Thanks.
    – Vincent
    Jan 7, 2020 at 20:44
11

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

9

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

2
  • hmm strange for me on osx, terminal loses focus after I do this Dec 18, 2019 at 3:23
  • @DanielLizik, now VSCode has the option "View-->Appearance-->Move Panel ___".
    – sh6210
    Nov 3, 2020 at 5:27
9

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)
2
7

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

1
  • I always want the terminal on the left, I certainly don't want to have to use a command to move it there every time. Does the command "move panel left" make this permanent? Or do I have to run this command every time I start up VSC? (Mark, I know you're not responsible for this, I'm just frustrated at this new system, which seems terribly opaque, and the release notes .) Feb 8, 2022 at 19:45
6

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

3
  • 1
    A link to a solution is welcome, but please ensure your answer is useful without it: add context around the link so your fellow users will have some idea what it is and why it’s there, then quote the most relevant part of the page you're linking to in case the target page is unavailable. Answers that are little more than a link may be deleted.
    – Bugs
    Oct 27, 2017 at 12:37
  • There is a button just next to the cross "x" icon
    – pulankit
    Jun 25, 2018 at 11:21
  • 2
    @pulankit Thanks, it dissapeared because the pane wasn't wide enough and I could not find it with popouts or something.
    – MrFox
    Jun 25, 2018 at 11:44
5

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
3

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

1
  • 1
    OP refers to the bottom panel, not the left sidebar.
    – steph643
    Aug 3, 2017 at 7:41
2

"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

2

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

enter image description here

1
"workbench.panel.defaultLocation": "right",
1
  • 1
    This answer is already provided by this 2 year old answer. Please only post a new answer if you add a new solution or a significantly better explanation; otherwise just upvote the existing answer. Aug 4, 2020 at 7:10
1

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

1

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.

1

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

0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.