Keyboard Driven VSCode
Tags: vscode
Published: 2019-11-19 04:01:07

---
title: Keyboard Driven VSCode
published: true
canonical_url: https://waylonwalker.com/blog/keyboard-driven-vscode/
cover_image: https://res.cloudinary.com/practicaldev/image/fetch/s--bNlKdaJq--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://thepracticaldev.s3.amazonaws.com/i/37h8jz0zbk2wkl5rpv4j.jpg
---

> Throw that mouse Away its time to setup some keyboard shortcuts.

Quick side note.  This is a cross post from my personal blog at https://waylonwalker.com/blog/keyboard-driven-vscode/.

These sortcuts were the baseline for switching from tmux/vim to vscode.  Most folks posts I was able to find gave great tips on replacing vim, but very few have focused on the hackability of tmux.  tmux allows me to rapidly fire up a workspace, create new windows and splits.  Then When I switch tasks I can leave that workspace open and and jump right back in later exactly where I left off.  There is nothing quite like it.  The shortcuts listed here make the transition a bit better. The worst thing I found when using vscode at first was no way to switch between the terminal and editor without the mouse.  This first set of keybindings solve that issue.

> The worst thing I found when using vscode at first was no way to switch between the terminal and editor without the mouse.

## <kbd>Alt</kbd>+\[hjkl\]

_navigation_

⬅ jump to **left** split **<kbd>Alt</kbd>+<kbd>h</kbd>**

⬇ jump to **terminal** from editor **<kbd>Alt</kbd>+<kbd>j</kbd>**

⬆ jump to **editor** from terminal **<kbd>Alt</kbd>+<kbd>k</kbd>**

➡ jump to **right** split **<kbd>Alt</kbd>+<kbd>l</kbd>**

This is by var the most useful set of keybindings that I use in vscode and is directly replicated from my tmux configuration.  It allows me to quickly jump up, down, left, right.  Do note that if you use vertical splits it does not work as well as tmux 😢.

![navigating vscode with keyboard shortcuts](https://thepracticaldev.s3.amazonaws.com/i/pzj3qsvtfyi2lkv46qq2.gif "Alt+[hjkl]")


``` json
    [
            {
                "key": "alt+j",
                "command": "workbench.action.terminal.focus",
                "when": "editorFocus"
            },
        
            {
                "key": "alt+k",
                "command": "workbench.action.focusFirstEditorGroup",
                "when": "terminalFocus"
            },
            {
                "key": "alt+k",
                "command": "workbench.action.focusAboveGroup",
                "when": "editorFocus"
            },
            {
                "key": "alt+l",
                "command": "-toggleFindInSelection",
                "when": "editorFocus"
            },
            {
                "key": "alt+l",
                "command": "workbench.action.focusNextGroup",
                "when": "editorFocus"
            },
            {
                "key": "alt+h",
                "command": "workbench.action.focusPreviousGroup",
                "when": "editorFocus"
            },
        
            {
                "key": "alt+l",
                "command": "workbench.action.terminal.focusNextPane",
                "when": "terminalFocus"
            },
            {
                "key": "alt+h",
                "command": "workbench.action.terminal.focusPreviousPane",
                "when": "terminalFocus"
            },
    ]

```

## <kbd>Alt</kbd>+<kbd>b</kbd>

_toggle bloat_

Since closing the sidebar is assigned to `ctrl+b` I thought that it made most sense to simulate the activity bar with `<kbd>Alt</kbd>+<kbd>b</kbd>`.  There are many times when I just want to get as much out of the way as possible and this little bit does help.

![hiding the activity bar ](https://thepracticaldev.s3.amazonaws.com/i/5xle7obqc7dj62aix5fs.gif "Alt+b")

``` json
    [
        {
            "key": "alt+b",
            "command": "workbench.action.toggleActivityBarVisibility",
            "when": "editorFocus"
        },
    ]
```

## <kbd>Alt</kbd>+\[svx\]

_Split it up_

🙌 Split hoizontally **<kbd>Alt</kbd>+<kbd>s</kbd>**

🍌 Vertically **<kbd>Alt</kbd>+<kbd>v</kbd>**

💥 Close **<kbd>Alt</kbd>+<kbd>x</kbd>**

This is another one replicated from tmux for quickly creatiting horizontal (s) and vertical (v) splits.  Once I am done with them I can close them with <kbd>Alt</kbd>+<kbd>x</kbd>.

![Make and destroy splits with ease in vscode.](https://thepracticaldev.s3.amazonaws.com/i/osvz2rlix17kpri9dg6w.gif "spliting the editor")


``` json
     [
        {
            "key": "alt+s",
            "command": "workbench.action.terminal.split",
            "when": "terminalFocus"
        },
        {
            "key": "alt+s",
            "command": "workbench.action.splitEditor",
            "when": "editorFocus"
        },
        {
            "key": "alt+v",
            "command": "workbench.action.splitEditorOrthogonal",
            "when": "editorFocus"
        },
        {
            "key": "alt+x",
            "command": "workbench.action.terminal.kill",
            "when": "terminalFocus"
        },
        {
            "key": "alt+x",
            "command": "workbench.action.closeActiveEditor",
            "when": "editorFocus"
        }
      ]
```

## <kbd>Alt</kbd>+\[cnp\]

🤲 **Create** new workspace **<kbd>Alt</kbd>+<kbd>c</kbd>**

⏭ jump to **next** workspace **<kbd>Alt</kbd>+<kbd>n</kbd>**

⏮ jump to **previous** workspace **<kbd>Alt</kbd>+<kbd>p</kbd>**

Sometimes the terminal window gets a bit cramped inside of splits and you need to use different panes.  I replicated the cnp pattern from tmux here as well.  I can create (c) new panes, then go to the next (n), or previous (p) without leaving the comfort of my keyboard.

I am often using this one when I have a process running that I watch like gatsby, and I need to quickly pop into a new pane to run a git command and back in to gatsby before jumping up to my editor.

![terminal splits](https://thepracticaldev.s3.amazonaws.com/i/fv17x4p06vbggrfah6br.gif "terminal splits")

``` json
    [
        {
            "key": "alt+c",
            "command": "workbench.action.terminal.new",
            "when": "terminalFocus"
        },
        {
            "key": "alt+n",
            "command": "workbench.action.terminal.focusNext",
            "when": "terminalFocus"
        },
    
        {
            "key": "alt+p",
            "command": "workbench.action.terminal.focusPrevious",
            "when": "terminalFocus"
        },
    ]
```

## <kbd>Alt</kbd>+<kbd>z</kbd>

🗻 Zoom into terminal **<kbd>Alt</kbd>+<kbd>z</kbd>**

This last one doesnt work as well as I would like but it sure does get the job done.  It Zooms (z) into the terminal from anywhere in vscode.  I can be in my editor and zoom out of the terminal to make more room, or zoom in to see what happened from my last edit.


![Fullscreen Terminal](https://thepracticaldev.s3.amazonaws.com/i/cepkp1a7jp9ydzxtnl4b.gif "zoom the terminal")

``` json
    [
        {
            "key": "alt+z",
            "command": "workbench.action.toggleMaximizedPanel",
        },
    ]
```

# Bonus

## <kbd>Alt</kbd>+<kbd>r</kbd>

🖱 right click in place

I recently found this one, and find it quite useful to quickly do things like revert selected range, or extract variable without leaving the keyboard.

``` json
[
  {
    "key": "alt+r",
    "command": "editor.action.showContextMenu",
  },
]
```