VSCode - Terminal without using mouse
Tags: vscode, terminal, productivity, programming
Published: 2022-09-30 13:52:02

> Look ma, no ~~hands~~ mouse!

If you are trying to reduce the interaction with the mouse during development in order to increase productivity, you are in the correct place.

VSCode includes an integrated terminal and used wisely can be your best friend, but sometimes it will need a lot of mouse interactions, so I decided to tweak it a little. 

---

## Create

The first step it's adding my secret keyboard shortcut settings.

```json
[
    {
        "key": "ctrl+`",
        "command": "workbench.action.terminal.focus",
        "when": "editorTextFocus"
    },
    {
        "key": "ctrl+shift+`",
        "command": "workbench.action.terminal.new",
        "when": "terminalProcessSupported || terminalWebExtensionContributedProfile"
    },
    {
        "key": "ctrl+shift+`",
        "command": "workbench.action.createTerminalEditor",
        "when": "editorTextFocus"
    },
    {
        "key": "ctrl+`",
        "command": "workbench.action.focusActiveEditorGroup",
        "when": "terminalFocus"
    },
    {
        "key": "alt+`", //opt+` on macOS
        "command": "workbench.action.toggleMaximizedPanel"
    },
    {
        "key": "ctrl+alt+`", //ctrl+opt+` on macOS
        "command": "workbench.action.terminal.toggleTerminal"
    },
    {
        "key": "ctrl+\\",
        "command": "workbench.action.terminal.split",
        "when": "terminalFocus"
    },
    {
        "key": "ctrl+space",
        "command": "workbench.action.terminal.runRecentCommand",
        "when": "terminalFocus"
    },
    {
        "key": "ctrl+w",
        "command": "workbench.action.terminal.kill",
        "when": "terminalFocus"
    },
    {
        "key": "ctrl+k ctrl+w",
        "command": "workbench.action.terminal.killAll",
        "when": "terminalFocus"
    }
]
```

---

## Learn

The next step, familiarize yourself with the new keyboard shortcuts.

### Basics

| Action | Focused | Win/Linux | macOS |
| ------ | ----- | ----------| ----- |
| Open terminal | Terminal | <kbd>ctrl+`</kbd> | <kbd>ctrl+`</kbd> | 
| Toggle to terminal  | Editor | <kbd>ctrl+`</kbd> | <kbd>ctrl+`</kbd> |
| Toggle to editor | Terminal | <kbd>ctrl+`</kbd> | <kbd>ctrl+`</kbd> | 
| Toggle maximize/minimize | Terminal | <kbd>alt+`</kbd> | <kbd>opt+`</kbd> |
| Toggle show/hide | Terminal | <kbd>ctrl+alt+`</kbd> | <kbd>ctrl+opt+`</kbd> |
| New terminal | Terminal | <kbd>ctrl+shift+`</kbd> | <kbd>ctrl+shift+`</kbd> | 
| New terminal as tab | Editor | <kbd>ctrl+shift+`</kbd> | <kbd>ctrl+shift+`</kbd> | 
| New terminal split | Terminal | <kbd>ctrl+\\</kbd> | <kbd>ctrl+\\</kbd> | 
| Close terminal | Terminal | <kbd>ctrl+w</kbd> | <kbd>ctrl+w</kbd> |
| Close all terminals | Terminal | <kbd>ctrl+k ctrl+w</kbd> | <kbd>ctrl+k ctrl+w</kbd> |


### Navigation

| Action | Focused | Win/Linux | macOS |
| ------ | ----- | ----------| ----- |
| Previous terminal | Terminal | <kbd>ctrl+pageUp</kbd> | <kbd>ctrl+pageUp</kbd> | 
| Next terminal | Terminal | <kbd>ctrl+pageDown</kbd> | <kbd>ctrl+pageDown</kbd> | 
| Previous split terminal | Terminal | <kbd>alt+upArrow</kbd> | <kbd>opt+upArrow</kbd> | 
| Next split terminal | Terminal | <kbd>alt+downArrow</kbd> | <kbd>opt+downArrow</kbd> | 
| Scroll Up | Terminal | <kbd>ctrl+downArrow</kbd> | <kbd>ctrl+upArrow</kbd> | 
| Scroll down | Terminal | <kbd>ctrl+downArrow</kbd> | <kbd>ctrl+upArrow</kbd> | 
| Scroll to top | Terminal | <kbd>ctrl+home</kbd> | <kbd>ctrl+home</kbd> | 
| Scroll to bottom | Terminal | <kbd>ctrl+end</kbd> | <kbd>ctrl+end</kbd> | 

### Integrated

```json
{
  "terminal.integrated.shellIntegration.enabled": true
}
```

If you have the shell integration terminal enabled, you can also re-run recent commands.

| Action | Focused | Win/Linux | macOS |
| ------ | ----- | ----------| ----- |
| Run recent command |  | <kbd>ctrl+space</kbd> | <kbd>ctrl+space</kbd> | 

---

## Practice

The final step is practice and repetition, there is no other way to remember those keyboard shortcuts. 

Open a project in VSCode, **disconnect or shutdown your mouse**, close your eyes, take a deep breath, and enter into Lighting McQueen mode 😜

![Lightning McQueen](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9xfb12rhhq9vp3zulvjk.gif)

### Challenge 1

- Open a terminal
- Toggle to the code editor
- Add a comment
- Back to the terminal
- Commit changes
- Close the terminal

{% spoiler Solution %} 

![solution-1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ytdu8pttgnj5thxwy1jn.gif) 

{% endspoiler %}

### Challenge 2

- Open a terminal
- Execute a run command (`npm run...`)
- Hide terminal (this doesn't stop his execution)
- Made changes to the code
- Show terminal
- Stop execution (`ctrl+c`)
- Close the terminal

{% spoiler Solution %} 

![solution-2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lss4rkktty68c5zh4vha.gif)

{% endspoiler %}


### Challenge 3

- Open a terminal
- Execute the test (`npm run test`)
- Maximize the terminal to see the results
- Minimize the terminal
- Go to the code editor and "fix" the failed test
- Go to terminal
- Execute the test again (`npm run test`)
- Maximize the terminal to see the results
- Minimize the terminal
- Close the terminal

### Challenge 4

- Open a terminal as tab
- Execute the lint command (`npm run lint`)
- See the changes on the previous tab (code)
- Back to the terminal tab
- Close the terminal

### Challenge 5

- Open a terminal
- Execute a run command (`npm run...`)
- Create another terminal
- Execute the test on watch mode (`npm run test --watch`)
- Create another terminal 
- Execute the eslint command (`npm run linter`)
- Hide terminals
- Go to the code and made some changes
- Show terminals
- Go back to the terminal and stop the watch mode
- Go to the last terminal and run the list command
- Go to the first terminal and stop his execution (`ctrl + c`)
- Close all terminals

### Challenge 6

- Open a terminal
- Execute a run command (`npm run...`)
- Create another terminal
- Execute the test on watch mode (`npm run test --watch`)
- Create another split terminal 
- Execute the eslint command (`npm run linter`)
- Hide terminals
- Go to the code and made some changes
- Show terminals
- Go back to the terminal and stop the watch mode
- Go to the last terminal and run the list command
- Go to the first terminal and stop his execution (`ctrl + c`)
- Close all terminals

Tell me in the comments if you can solve the challenges 👇

---

**That’s All Folks!**
**Happy Coding** 🖖

[![beer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mkgsx4aw6qn9i9ax6as9.png)](https://github.com/sponsors/deinsoftware)