Save Time in VS Code using same shortcut for different commands

Have you ever had to run different npm/gulp/python commands in different projects - for starting a dev instance?

The npm commands that I have to run to start a dev instance of a web app vary based on the type of framework I use, the project and its team's preferences etc... For example npm start for CRA, npm run dev for next.js and so on...

Wouldn't it be great if you had a single shortcut to run the desired command - based on the project? Let's see how to do that.

In order to understand this, you need to be aware of 2 things:

configuring custom keyboard shortcuts in VS Code keybindings.json, but more importantly,
adding custom tasks in the tasks.json file under your root folder like ./.vscode/tasks.json - which lets you configure your own custom commands for re-use.

Let's begin

tasks.json

First, let's add a custom task in tasks.json file, where you can store a list of commands in your projects.

In the root folder of your project, create a .vscode folder if it doesn't exist
create a tasks.json file under the .vscode folder

and copy the below code into the file

  {
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "2.0.0",
    "tasks": [
      {
        "label": "startDev",
        "type": "npm",
        "script": "start:host" // add your npm command here
      }
    ]
  }

That's all. This is basically a custom command named startDev which runs npm run start:host or any other script you specify.

I know this looks like you have to maintain a copy of package.json scripts, but you will only have to set this up once in one project and simply copy it in all your projects with minor changes. And trust me, it will be worth it.

It doesn't have any big impact on its own at this point, but the next step is where it helps simplify your workflow.

keybindings.json

Now, you can add a keyboard shortcut to execute the custom task that you have defined above.

Open your keybindings.json file and copy the below code before/after any of the existing shortcuts

// Place your key bindings in this file to override the defaultsauto[]
[
    {
        "key": "ctrl+shift+/",
        "command": "workbench.action.tasks.runTask",
        "args": "startDev",
    },
    {...},
    {...},
    ...
]

Thats it. The above code tells VS Code to run the startDev task we defined above when you use the shortcut CTRL +SHIFT + /.

I found that if we use the "group": { "kind": "build", "isDefault": true } property in the task - then we can use the in-built shortcut (CTRL + SHIFT + B) to run the task, instead of creating a custom keybinding above

Reusability

That's all you need to know to be able to re-use the same command CTRL +SHIFT + / in multiple projects to run different scripts.

Now you can simply copy the .vscode/tasks.json file in any project and update the script in the startDev task that we have written to run your desired command (like serve:chrome). And the best part is, the script can be different in different projects.

Extensibility

The above example is for a node.js project that uses npm to run scripts. but you can easily configure it to suit your needs in any of the systems like gulp, yarn etc... You can also use it in:

any other development in VS Code using python, shell etc...
any terminal like cmd, PowerShell, etc...

To further extend it,

you can also prompt the user to input or pick a script of their choice.
you can also compound multiple tasks together in tasks.json to run tasks in a sequence.
Using tasks.json allows you to add conditional scripts which run based on your OS. This means it's easy to collaborate between team members using different systems or Operating systems.

Conclusion

Now this is just a simple example of how to run a single command, different in each project with one shortcut. But you can easily configure your tasks.json file or keybindings.json file to run multiple commands.

I originally started by looking for resources to create custom keybindings per workspace (discussed here and here). But that would mean I have to define the shortcut in each workspace. And in the process of looking for this, I came up with this approach which in my opinion is much better.

Use same shortcut for different scripts in VS Code

Table of contents

tasks.json

keybindings.json

Reusability

Extensibility

Conclusion

Additional References