VSCode - Terminal without using mouse

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.

[
    {
        "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	ctrl+`	ctrl+`
Toggle to terminal	Editor	ctrl+`	ctrl+`
Toggle to editor	Terminal	ctrl+`	ctrl+`
Toggle maximize/minimize	Terminal	alt+`	opt+`
Toggle show/hide	Terminal	ctrl+alt+`	ctrl+opt+`
New terminal	Terminal	ctrl+shift+`	ctrl+shift+`
New terminal as tab	Editor	ctrl+shift+`	ctrl+shift+`
New terminal split	Terminal	ctrl+\	ctrl+\
Close terminal	Terminal	ctrl+w	ctrl+w
Close all terminals	Terminal	ctrl+k ctrl+w	ctrl+k ctrl+w

Navigation

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

Integrated

{
  "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		ctrl+space	ctrl+space

---

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 😜

Challenge 1

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

Solution

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

Solution

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 🖖