DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 963,503 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for VSCode - Terminal without using mouse
Camilo Martinez
Camilo Martinez

Posted on

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"
    }
]
Enter fullscreen mode Exit fullscreen mode

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
}
Enter fullscreen mode Exit fullscreen mode

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 😜

Lightning McQueen

Challenge 1

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

Solution

solution-1

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

solution-2

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 πŸ––

ko-fi

Top comments (0)

🌚 Friends don't let friends browse without dark mode.

Sorry, it's true.