将Visual Studio Code中的面板移到右侧


246

在Visual Studio Code中,默认情况下面板部分位于底部。如何将其移到右侧?例如,在下图中,panel(D部分)位于底部,相反,我希望它移至右侧,即在Editor Groups(C部分)中显示README.md编辑区域。在此处输入图片说明

图片积分:(https://code.visualstudio.com/images/codebasics_hero.png


滚动条的背景色不扎实,结果是...... [在这里输入的形象描述!i.stack.imgur.com/pTmzS.png
MCunha98

4
您应该更新此问题以接受@dcastro的答案。当前接受的答案不再有效。
jmargolisvt

Answers:


538

自2018年10月(1.29版)起,@ mvvijesh答案中的按钮不再存在。

您现在有2个选择。右键单击面板的工具栏(面板上的其他任何地方都无法使用),然后选择“向右/向下方移动面板”:

或从命令面板中选择“ 视图:切换面板位置 ”。

来源:VSCode更新说明:https://code.visualstudio.com/updates/v1_29#_panel-position-button-to-context-menu


62
还值得一提的是,必须在面板的工具栏上执行右键单击。(单击其他任何位置都无济于事。)
customcommander

11
真烦人 不断变化。
请看

7
谢谢!这让我发疯。他们为什么在1.29.1中取消按钮?以前与Chrome的开发工具保持一致,而现在却不如此。
colefner '18

9
@colefner提醒您您使用的是Microsoft产品:它没有损坏,但他们确定会继续进行修复。
mkvlrn

10
@shashwat是,打开“快捷键”并搜索workbench.action.togglePanelPosition。您可以添加键盘快捷键来回切换。
杰克·巴斯曼

126

对于寻找答案的人(关于如何移动侧面板):

你可以按

ctrl+ ,(或OSX上的cmd+ ,

并将以下选项添加到您的用户设置JSON文件中:

"workbench.sideBar.location": "right"

左侧的侧边栏


10
OP是指底部面板,而不是左侧边栏。
steph643

6
@ steph643 OP在他的主题行中也不清楚,他也指的是哪个面板。尽管他的问题很好地说明了这一点,但这是我们在Google搜索结果中看到的主题行。这个答案就是我所提问题的答案。常常被人们遗忘的是,对于大众寻找答案的原因,是Google引导我们走到鼻子附近,直到我们发现某个地方没有被一些笨手笨拙的近视mod否定我们没有正确答案,因为它没有正确地进行引起注意并向他们的机敏致敬。
hawkeyegold

@forres,是否可以使面板浮动并将其移动到单独的监视器上?这是我使用VS时的常用设置-左侧的代码,右侧的所有面板。更改侧边栏的锚点(左/右)不会更改可见的文本编辑器的大小
Darius

3
我同意@hawkeyegold-虽然答案显然不能满足OP的意图,但它非常有用,因为我也在与Forres完全相同的问题上搜索了这个问题-希望移动工作台侧栏。非常感谢!
Per Lundberg

2
投票失败,因为此答案令人困惑,并阻塞了寻求正确答案的机会。作者问如何移动Panel,而不是侧面板。正确答案属于Stefano:"workbench.panel.defaultLocation": "right"
Barabas

112

我在Mac上使用Visual Studio Code v1.24.0。

默认情况下,面板将显示在底部(您也可以更改默认值。请参考@Forres的答案:将Visual Studio Code中的面板移到右侧

这是VS Code面板的底部/右侧切换按钮:

在此处输入图片说明

单击此按钮后,面板将移至右侧。

在此处输入图片说明

但是,将其移回有些棘手。如您所见,某些按钮是隐藏的。这是因为将面板右对齐时的宽度太小。我们需要扩展该列以查看所有按钮。

这是扩展时的样子:

在此处输入图片说明

现在,如果要将面板移回底部,请再次单击切换底部/顶部按钮。


6
这真令人困惑。底部只是隐藏的,还有另一个看起来像它的底部。错误的UX
Alex Bollbach '18

1
非常感谢您的隐藏按钮:D它确实节省了我很多时间
Ken Block

14
您还可以打开然后命令面板并使用View: toggle panel position
protoEvangelion

33
该图标似乎不再适合我。无论面板在底部还是右侧。即使面板有足够的宽度。我需要右键单击面板标题以使其向右或向下移动。真烂
oyalhi

3
@oyalhi,与最新的Visual Studio代码(版本1.32.3)正确的答案似乎是'查看- >外观- >切换面板位置”,像什么@protoEvangelion提到。
苏巴普山

35

不知道为什么这里没有提到,但是这个设置对我有用:

"workbench.panel.defaultLocation": "right"


OP是指底部面板,而不是工作台面板。工作台面板包含文件浏览器,扩展名等。不幸的是,它们都被调用,___ panel因此很容易造成混乱。
杰森·弗莱

6
我认为您真正想到的是workbench.sideBar.location。除非我在复制评论时搞砸了,否则无论如何我现在发现现在有一个新按钮可以将其移到侧面并移回底部。
Stefano

2
最好的答案在这里。就像我需要的那样,它将终端(底部)面板移至右侧。完全按照操作要求。谢谢!
泰勒·戴维斯

它需要先关闭现有的候机楼,然后执行CTRL+`以在右侧显示它们
Aditya Kresna Permana

10

单击菜单选项“查看”->“向右移到侧栏”。一旦侧栏向右移动,选项“向右移动到侧栏”将变为“向左移动到侧栏”。

干杯


这不再存在
pmiranda

这已移至“视图”>“外观”>“向右/向左移动侧边栏”
jkmartindale

10

自2019年6月起,可以通过搜索``面板''找到此设置-如果您想更改默认设置,则有一个选项,如屏幕截图所示:在此处输入图片说明


1
JSON中的设置是“ workbench.panel.defaultLocation”:“ right”
williamli

正是我想要的!谢谢。
文森特

9

希望这会帮助某人。

->打开键盘快捷键

->搜索“ workbench.action.togglePanelPosition”

->分配所需的快捷方式

我分配了键绑定“ cmd +`”

{
  "key": "cmd+`",
  "command": "workbench.action.togglePanelPosition"
}

现在,我可以通过按“ cmd +`”来切换终端


嗯,在osx上对我来说很奇怪,执行此操作后终端将失去焦点
Daniel Lizik 19/12/18

7

对于Visual Studio Code v1.31.1,您可以通过“ 查看”菜单切换面板会话。

  • 转到查看菜单。
  • 通过外观选项,单击Toggle Panel Position

在此处输入图片说明


4

您可以在内部人员版本中进行相同的操作,右上角有一个选项可以切换到侧边栏面板https://code.visualstudio.com/insiders/

终端在底部 终端在底部

终端在右侧 右侧的终端


1
欢迎使用指向解决方案的链接,但请确保没有该链接的情况下,您的回答是有用的:在链接周围添加上下文,以便您的其他用户可以了解它的含义和含义,然后引用您所使用页面中最相关的部分如果目标页面不可用,请重新链接到。只是链接的答案可能会被删除。
错误

十字“ x”图标旁边有一个按钮
pulankit

2
@pulankit谢谢,它消失了,因为窗格不够宽,我无法通过弹出窗口或其他东西找到它。
MrFox

4

VSCode 1.42(2020年1月)引入了:

左/右面板

现在可以使用以下设置将面板移动到编辑器的左侧:

"workbench.panel.defaultLocation": "left"

这将删除命令View: Toggle Panel Positionworkbench.action.togglePanelPosition),以支持以下新命令:

  • View: Move Panel Leftworkbench.action.positionPanelLeft
  • View: Move Panel Rightworkbench.action.positionPanelRight
  • View: Move Panel To Bottomworkbench.action.positionPanelBottom

对我来说,我必须重新启动VSCode才能看到更改。

1
@川OK。:对我来说,我在2020年1.46等待VSCode月github.com/microsoft/vscode-docs/blob/...
VonC

2

我不知道从哪个版本开始更改,但是1.11.2在“视图”选项卡中有一个选项,可以将左侧栏更改为右侧,反之亦然


OP是指底部面板,而不是左侧边栏。
steph643
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.