Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Toggle between fullscreen editor and terminal in VS Code

As a Windows systems admin, I use PowerShell quite a lot. With the release of PS Core, and the implication that the ISE is dead, I've started to try to use VS Code as my day to day tool. One feature I'm missing from ISE is the ability to swap between the editor and the terminal in fullscreen. I usually kept ISE open and maximized, and used Ctrl+R to swap between editor and terminal as needed. I haven't found a way to maximize the terminal, and swap easily between terminal and editor. I know I can make the terminal take up most of the screen, but a) this still leaves about 2 lines of editor open at the top, and b) there doesn't seem to be an easy way to then maximize the editor. Is there a way to minic the ISE behaviour that I haven't found yet?

like image 337
DarkMoon Avatar asked Jan 30 '18 00:01

DarkMoon


People also ask

How do I switch between terminal and editor in VS Code?

Once the cursor is in the terminal section you can use ctrl+x ctrl+up or ctrl+x ctrl+down to cycle through the active terminals.

How do I minimize terminal VS Code?

Use the Ctrl + ` keyboard shortcut with the backtick character to show or hide the Terminal window.

How do you use toggle in VS Code?

Usage. Set your cursor on a word or select a word and press the associated keybinding (Ctrl+r by default on macOS, Alt+r on Windows and Linux). You can also use the VS Code Command Palette and choose the Toggle command, or use the Toggle action in a context menu.


3 Answers

To toggle between a full screen editor and a nearly full screen terminal you can use:

{
    "key": "ctrl+alt+m",
    "command": "workbench.action.toggleMaximizedPanel"
}

with your keybinding of choice to replace the Ctrl-Alt-m : that is mine. You just need to "maximize" the terminal first - pull it up as far as it goes. It will remember that between sessions.


Revisiting this :

As of v1.38 this is now pretty simple. There are two commands that will toggle the panel/editors to full screen.

Pick some keybinding to use for the toggle trigger:

{
    "key": "ctrl+alt+q",
    "command": "workbench.action.toggleMaximizedPanel",
    // "command": "workbench.action.toggleEditorVisibility"  either one
    "when": "!terminalFocus"
},

The above will expand the panel or editor to full height, but toggling back will return the panel to its original size but not to nothing. If you want the terminal to bounce between full open and full closed try both of these keybindings:

{
  "key": "ctrl+alt+t",  // you could use     "key": "ctrl+`",  if you wish
  "command": "workbench.action.closePanel",
  // "when": "terminalFocus"
},
{
  "key": "ctrl+alt+t",
  "command": "workbench.action.toggleMaximizedPanel",
  "when": "!terminalFocus"
},

The order of the above 2 keybindings is important.

toggle terminal demo


v1.50 is adding the setting panel.opensMaximized - I tried its different options but couldn't get a simpler result than the two keybindings ctrl+alt+t version I showed above. In any case, start with the panel closed for it to work well.

like image 168
Mark Avatar answered Oct 20 '22 15:10

Mark


The below outlines my solution after reading @Mark 's answer, as it's slightly different. I use ctrl-alt-m to switch between a full-sized terminal and full-sized editor.

note: this includes the mentioned integrated terminal and vscode application menu bars.

For posterity's sake, I'm on vscode version 1.40.1.

Implementation

You'll need to add to your keybindings within vscode and execute a manual step.

keybindings.json

Add this to your keybindings.json file, accessible via the Keyboard Shortcuts editor:

    {
        "key": "ctrl+alt+m",
        "command": "workbench.action.toggleMaximizedPanel",
        "when": "!terminalFocus"
    },
    {
        "key": "ctrl+`",
        "command": "-workbench.action.terminal.toggleTerminal",
        "when": "!terminalFocus"
    },
    {
        "key": "ctrl+alt+m",
        "command": "workbench.action.terminal.toggleTerminal",
        "when": "terminalFocus"
    }

Slide down the integrated terminal

Once you've done this and saved your keybindings.json file you need to manually slide down the integrated terminal all the way off the screen on the bottom, after opening from your editor with ctrl+`.

Afterwards, you should be able to use ctrl+alt+m in your editor and your terminal to get a full-screen-ish experience moving between them.

I've tested this on Ubuntu and Fedora locally as hosts and using remote-ssh to an Ubuntu remote from a Windows 10 host. This has the added benefit of allowing you to get the by-default smaller terminal from within your editor using ctrl+` but use a single command, ctrl+alt+m, for switching between editor/terminal. YMMV!

like image 31
Jason R Stevens CFA Avatar answered Oct 20 '22 15:10

Jason R Stevens CFA


Solution 1: Create Terminal in new Tab and Switch Between Tabs

Ctrl+Shift+P > Terminal: Create New Terminal in Editor Area create a terminal as a new Tab (A.k.a. Editor). It looks like:

enter image description here

Now you can toggle between Tabs (A.k.a. Editors) and Terminal (Which is in a new Tab) using View: Quick Open Previous Recently Used Editor in Group

Solution 2: Create Terminal in new Editor Group and Switch Between Editor Groups

Ctrl+Shift+P > Terminal: Create New Terminal in Editor Area to the Side create a terminal in new Editor Groups. It looks like:

enter image description here

Now you can toggle between window and terminal using View: Navigate Between Editor Groups

NOTE:

You can add keybinding to the commands as per your convenience. For example, in case of Solution 1:

{
    "key": "ctrl+`",
    "command": "workbench.action.createTerminalEditor"
},
{
    "key": "ctrl+tab",
    "command": "workbench.action.quickOpenPreviousRecentlyUsedEditorInGroup",
    "when": "!activeEditorGroupEmpty"
},
{
    "key": "ctrl+w",
    "command": "workbench.action.terminal.killEditor",
    "when": "terminalEditorFocus && terminalFocus && terminalHasBeenCreated && resourceScheme == 'vscode-terminal' || terminalEditorFocus && terminalFocus && terminalProcessSupported && resourceScheme == 'vscode-terminal'"
}

Here, Ctrl+W & Ctrl+Tab are set by default. I just modified Ctrl+`.

The above keybinding will

  • Create terminal when you press Ctrl+`
  • Close terminal when you press Ctrl+W
  • Toggle between fullscreen editor and terminal when you press Ctrl+Tab
like image 11
blueray Avatar answered Oct 20 '22 14:10

blueray