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

Question

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)

You should update this question to accept the @dcastro 's answer. The current accepted answer is no longer valid. — jmargolisvt, Jan 22 '19 at 17:31
The backcolor of scrollbar not is solid and the result is ... [![enter image description here](https://i.stack.imgur.com/pTmzS.png)](https://i.stack.imgur.com/pTmzS.png) — MCunha98, Jan 24 '18 at 14:10
Also see https://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 '21 at 19:54
As of [v1.64](https://code.visualstudio.com/updates/v1_64#_new-side-panel), 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 08 '22 at 18:44
@Denis: I just spent a half hour trying to get the terminal to show up on the left-hand side, instead of at the bottom (which seems to be the new default) or on the right. I finally accomplished this, but I'm not sure how I got there. And remote work seems to require that you keep an "install" thingy running, in addition to the terminal itself. This new system is IMNSHO a disaster (not your fault, obviously!). Anyway, can you say a little more about how you re-position the terminal? I think you could rightly make it an "Answer", not just a comment. — Mike Maxwell, Feb 08 '22 at 19:01

score 932 · Accepted Answer · edited Mar 26 '20 at 15:49

932

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

edited Mar 26 '20 at 15:49

Sam R.

16,027
12
69
122

answered Nov 17 '18 at 16:07

dcastro

66,540
21
145
155

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.) – customcommander Nov 20 '18 at 12:11
15

How annoying. Constant changes. – see sharper Nov 26 '18 at 02: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 '18 at 00: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 '18 at 19:09
1

This is the most up to date answer! – Mjuice Dec 15 '18 at 02:47
can we assign shortcut key to toggle panel position? – shashwat Dec 17 '18 at 12:52
11

@shashwat Yes, open Keyboard Shortcuts and search for `workbench.action.togglePanelPosition`. You can add a keyboard shortcut that'll toggle it back and forth. – Jake Bathman Jan 04 '19 at 16:44
Thank you! This button to move right doesn't exit for me although I'm updated! (Mac) – Lee Maan Jan 17 '19 at 16:24
Sometimes you need people to point the obvious; Thank you dcastro! – Kristiyan D Kovachev Feb 11 '19 at 12:10
As of June 2019, the correct way of doing this is https://stackoverflow.com/a/56413015/1234260 – williamli Aug 14 '19 at 01:40
The "View: Toggle Pannel Position" command appears to be gone in version 1.42.0 – Hubro Feb 11 '20 at 11:15
2

Using 1.44.2 (April 2020), and the command now requires you to specify the location: `View: Move Panel To Bottom`, `View: Move Panel To Right`, or `View: Move Panel To Left` – JP Lew Apr 21 '20 at 06:33
how to set the width pf right panel? anyone who know about it? – MichaelMao Nov 26 '20 at 03:03
Can I just move one tool, say "Extensions" to the right, keeping everything else on the left? – Wojciech Owczarczyk May 15 '21 at 13:00
Wait a second, hey everyone. This moves project files to the right as well! The question is - how to move only DEBUG ly window to the right, while keeping files to the left? – Onkeltem Jan 21 '22 at 03:36

Forres · Answer 2 · 2017-08-24T17:44:57.920

163

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"

edited Aug 24 '17 at 17:44

answered Jun 10 '17 at 00:24

Forres

1,999
2
14
15

25

OP refers to the bottom panel, not the left sidebar. – steph643 Aug 03 '17 at 07: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. – hawkeyegold Nov 16 '17 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 09 '18 at 06: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! – Per Lundberg Oct 04 '18 at 08: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](https://stackoverflow.com/a/51752348/2674033) belongs Stefano: `"workbench.panel.defaultLocation": "right"` – Barabas Oct 24 '19 at 12:37

score 113 · Answer 3 · edited Mar 12 '19 at 02:06

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:

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.

edited Mar 12 '19 at 02:06

Gama11

31,714
9
78
100

answered Jun 27 '18 at 09:30

mvvijesh

1,262
1
9
6

6

this so confusing. the bottom is just hidden and there's another that looks just like it. bad UX – Alex Bollbach Jul 14 '18 at 20:46
1

thank you very much for hidden buttons :D It really saved my time much – Ken Block Oct 12 '18 at 06:41
[Forres' answer](https://stackoverflow.com/questions/41874426/moving-panel-in-visual-studio-code-to-right-side/44468306#44468306) moves the `sidebar` not the `panel`. The right way of changing the default panel location is [Stefano's answer](https://stackoverflow.com/questions/41874426/moving-panel-in-visual-studio-code-to-right-side/51752348#51752348) – rasul Oct 28 '18 at 00:15
This is not intuitive... they should add a "More..." button to show all hidden buttons – Kyle Clegg Oct 31 '18 at 22:02
15

You can also open then command palette and use `View: toggle panel position` – protoEvangelion Nov 13 '18 at 01: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 '18 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 '19 at 22:14

score 63 · Answer 4 · edited Dec 04 '20 at 11:09

63

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

"workbench.panel.defaultLocation": "right"

edited Dec 04 '20 at 11:09

rofrol

14,438
7
79
77

answered Aug 08 '18 at 17:23

Stefano

1,686
1
16
25

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 09 '18 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 '18 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! – Tyler Davis Jan 09 '19 at 15:02
It requires to close the existing terminal first, and do `CTRL` + ` to show them on the right side – Aditya Kresna Permana May 16 '19 at 03:28

score 35 · Answer 5 · edited Feb 06 '21 at 00:24

35

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

edited Feb 06 '21 at 00:24

Ajeet Eppakayala

1,186
1
10
17

answered Apr 18 '18 at 20:19

This no longer exists – pmiranda Jun 27 '19 at 14:50
4

This has moved to View > Appearance > Move Side Bar Right/Left – jkmartindale Nov 05 '19 at 16:37

score 35 · Answer 6 · answered May 09 '21 at 12:00

35

In version 1.55.2.

Go to View --> Appearance --> Move Panel Right

answered May 09 '21 at 12:00

Manish

501
4
5

1

this works for me, short and nice! – Dayán Ruiz Nov 13 '22 at 23:09
Works for version 1.62 too. – Debashish Dec 10 '22 at 09:06

score 12 · Answer 7 · answered Jun 02 '19 at 07:27

12

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:

answered Jun 02 '19 at 07:27

NickersF

341
3
8

1

The settings in JSON is "workbench.panel.defaultLocation": "right" – williamli Aug 14 '19 at 01:40
Precisely what I was looking for! Thanks. – Vincent Jan 07 '20 at 20:44

score 11 · Answer 8 · answered Feb 18 '19 at 10:54

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

answered Feb 18 '19 at 10:54

Mel Michael

141
1
4

score 9 · Answer 9 · edited Nov 05 '19 at 17:22

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

edited Nov 05 '19 at 17:22

jkmartindale

523
2
9
22

answered Dec 16 '18 at 01:17

sh6210

4,190
1
37
27

hmm strange for me on osx, terminal loses focus after I do this – Daniel Lizik Dec 18 '19 at 03:23
@DanielLizik, now VSCode has the option "View-->Appearance-->Move Panel ___". – sh6210 Nov 03 '20 at 05:27

score 9 · Answer 10 · answered Jan 31 '20 at 22:26

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)

answered Jan 31 '20 at 22:26

VonC

1,262,500
529
4,410
5,250

For me, I had to restart the VSCode to see changes. – Chuan Jun 08 '20 at 08:27
1

@Chuan OK. For me, I am waiting for VSCode May 2020 1.46: https://github.com/microsoft/vscode-docs/blob/d5787d62216069e0b66b77c9470bb2d093c60e59/release-notes/v1_46.md#workbench – VonC Jun 08 '20 at 18:36

Mark · Answer 11 · 2022-02-10T21:25:02.727

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

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 .) — Mike Maxwell, Feb 08 '22 at 19:45

score 6 · Answer 12 · edited Oct 27 '17 at 18: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 at the right side

edited Oct 27 '17 at 18:45

Vikash Dahiya

5,741
3
17
24

answered Oct 27 '17 at 12:22

pulankit

555
4
9

1

A link to a solution is welcome, but please ensure your answer is useful without it: [add context around the link](//meta.stackexchange.com/a/8259) 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.](//stackoverflow.com/help/deleted-answers) – Bugs Oct 27 '17 at 12:37
There is a button just next to the cross "x" icon – pulankit Jun 25 '18 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 '18 at 11:44

score 5 · Answer 13 · answered May 25 '22 at 18:51

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

score 3 · Answer 14 · answered Apr 21 '17 at 07:19

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

answered Apr 21 '17 at 07:19

Nickos

91
8

1

OP refers to the bottom panel, not the left sidebar. – steph643 Aug 03 '17 at 07:41

score 2 · Answer 15 · answered Sep 24 '20 at 13:42

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.

answered Sep 24 '20 at 13:42

matrix

3,000
3
24
35

score 2 · Answer 16 · answered Nov 13 '20 at 10:48

2

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

answered Nov 13 '20 at 10:48

Dheeraj Palagiri

1,829
3
23
46

score 1 · Answer 17 · answered Aug 04 '20 at 04:20

1

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

answered Aug 04 '20 at 04:20

Dinesh Jinjala

29
1
2

1

This answer is already provided by [this 2 year old answer](https://stackoverflow.com/a/51752348/466862). Please only post a new answer if you add a new solution or a significantly better explanation; otherwise just upvote the existing answer. – Mark Rotteveel Aug 04 '20 at 07:10

score 1 · Answer 18 · edited Oct 07 '20 at 18:46

1

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

edited Oct 07 '20 at 18:46

Obsidian

3,719
8
17
30

answered Oct 07 '20 at 14:56

mangu

11
1

score 1 · Answer 19 · answered Oct 12 '21 at 13:54

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.

answered Oct 12 '21 at 13:54

saditya

93
1
10

score 1 · Answer 20 · answered Feb 08 '22 at 18:39

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

score 0 · Answer 21 · answered May 25 '22 at 12:17

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

answered May 25 '22 at 12:17

weiya ou

2,730
1
16
24

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

21 Answers21

Panel on the left/right

Linked