DEV Community

Cover image for Optimizing Your Workflow: Clearing VSCode Terminal on Save
Austin Coleman
Austin Coleman

Posted on

1

Optimizing Your Workflow: Clearing VSCode Terminal on Save

As developers, we're always on the lookout for ways to optimize our workflows. If you're working with node.js and frequently utilize nodemon for auto-reloading your server, you might have encountered a slight hiccup - the cluttered and sometimes confusing terminal history. To make your development process smoother and more efficient, here's a simple tip: Clear your VSCode Terminal on every save.

Prerequisite

  1. VSCode and MultiCommands Extension: We'll need the multiCommands extension for this.
  2. Usage of a Server Auto-Restart Tool: The advice in this article is particularly relevant if you are using a tool like nodemon that automatically restarts your server whenever you save changes. Such as this package.json:
{
  "main": "server.js",
  "scripts": {
    "dev": "nodemon server.js"
  },
  "dependencies": {
    "express": "^4.18.2"
  },
  "devDependencies": {
    "nodemon": "^2.0.22"
  }
}
Enter fullscreen mode Exit fullscreen mode

This might also be helpful if you are using Jest --watch and have a hard time telling the difference in error messages between saves.

Step-by-Step Guide

1. Install the MultiCommands Extension

You can download and install the multiCommands extension by ryuta46 from the Visual Studio Code marketplace.

2. Open User Settings (JSON)

Once installed, open your command palette using Ctrl + Shift + P. Then type Preferences: Open User Settings (JSON) and hit enter. This will open your settings.json file.

3. Update Settings.json

Add the following to your settings.json:

{
  "multiCommand.commands": [
    {
      "command": "multiCommand.clearTerminalOnSave",
      "sequence": [
        "workbench.action.files.save",
        "workbench.action.terminal.clear"
      ]
    }
  ]
}
Enter fullscreen mode Exit fullscreen mode

This command sequence first saves the file then clears the terminal.

4. Define Keyboard Shortcuts

Next, open the command palette again (Ctrl + Shift + P) and type Preferences: Open Keyboard Shortcuts (JSON). Add the following key bindings to the file:

[
  {
    "key": "ctrl+s",
    "command": "-workbench.action.files.save"
  },
  {
    "key": "ctrl+s",
    "command": "multiCommand.clearTerminalOnSave",
    "when": "editorTextFocus && editorLangId == javascript"
  },
  {
    "key": "ctrl+s",
    "command": "workbench.action.files.save",
    "when": "editorTextFocus && editorLangId != javascript"
  }
]
Enter fullscreen mode Exit fullscreen mode

This binding ensures that the terminal is cleared each time you save a JavaScript file. The regular save action will be performed for all non-JavaScript files.

Important: Remember, this setup clears the history for your most recently selected terminal. So, ensure that the terminal you want to clear is the last one you clicked.

Conclusion

That's it! With these steps, you can easily determine if the error messages in your terminal are from your most recent save or not. This will help improve your efficiency and accuracy when debugging your code. Happy coding!

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

👋 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