Run npm command on keybinding in Visual Studio Code

Question

I want to bundle js files on save using webpack.

This is best accomplished using webpack watch. But whatever...

In the answers below is the result of my googling, which I hope will be useful to somebody at some point.

Related: http://stackoverflow.com/questions/29996145/visual-studio-code-compile-on-save — Rafael Emshoff, Jan 30 '17 at 20:05
I think having webpack watch the files is a better way to do it, and easier to set up. — Rob Lourens, Jan 31 '17 at 05:53

score 10 · Accepted Answer · edited May 31 '23 at 14:21

Use npm to run webpack bundling on save in VSC ... or any other npm command you like, like compiling typescript.

Add a .vscode/tasks.json to your project:

See tasks.json format documentation for reference

{
    "command": "npm",
    "isShellCommand": true,
    "showOutput": "never",
    "suppressTaskName": true,
    "tasks": [
        {
            "taskName": "bundle",
            "args": ["run", "bundle"],
            "isBuildCommand": true,
            "showOutput": "never"
        }
    ]
}

Edit keybindings.json (File>Preferences>Keyboard Shortcuts).

Place your key bindings in this file to overwrite the defaults

[
    {
        "key" : "ctrl+s",
        "command" : "workbench.action.tasks.build"
    }
]

The workbench.action.tasks.build is a built-in vsc hook. See here: https://code.visualstudio.com/docs/customization/keybindings#_tasks

The task can also be accessed in VSC via

Ctrl+P
Type task + space
See your task suggested or continue typing it's name

Alex · Answer 2 · 2021-03-12T18:33:08.783

10

keybindings.json

{
    "key": "ctrl+shift+alt+b",
    "command": "workbench.action.terminal.sendSequence",
    "args": {
        "text": "npm run test\r"
    },
},

edited Mar 12 '21 at 18:33

answered Nov 17 '18 at 11:20

Alex

59,571
22
137
126

2

To find keybindings.json. Open command pallete (Usually ctrl + shift + P or cmd + shift + P) then look for "Preferences: Open Keyboard Shortcuts (JSON)". Make sure it's the one with (JSON). – Hunkoys Jul 27 '21 at 19:27

Run npm command on keybinding in Visual Studio Code

2 Answers2