Anwesh Gangula's Blog

Use same shortcut for different scripts in VS Code

Anwesh Gangula's photo
Anwesh Gangula
·

4 min read

Table of contents

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:

  1. configuring custom keyboard shortcuts in VS Code keybindings.json, but more importantly,

  2. 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

image.png

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,

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.

Additional References

VS CodeProductivityreusablilityShortcutskeyboard shortcuts