DEV Community

Cover image for VSCode - Terminal without using mouse
Camilo Martinez
Camilo Martinez

Posted on • Edited on

8 1 1

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 🖖

beer

Image of Datadog

The Future of AI, LLMs, and Observability on Google Cloud

Datadog sat down with Google’s Director of AI to discuss the current and future states of AI, ML, and LLMs on Google Cloud. Discover 7 key insights for technical leaders, covering everything from upskilling teams to observability best practices

Learn More

Top comments (0)

Eliminate Context Switching and Maximize Productivity

Pieces.app

Pieces Copilot is your personalized workflow assistant, working alongside your favorite apps. Ask questions about entire repositories, generate contextualized code, save and reuse useful snippets, and streamline your development process.

Learn more

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay