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"
  }
}

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"
      ]
    }
  ]
}

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"
  }
]

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!