Automatically running commands in Visual Studio Code projects

Modern web development generally involves running various scripts in your terminal to build assets, analyse your code and more. It's incredibly annoying to run those commands manually everytime you open a project.

Thankfully it's possible to automate that process in Visual Studio Code using tasks.json file.

Let's say that I'm working on a Laravel project and want to have Vite running. The command for that would be npm run dev.

Inside of a new file called .vscode/tasks.json, we could add the following JSON.

{
    "version": "2.0.0",
    "tasks": [
        {
            "label": "Run Vite",
            "type": "shell",
            "command": "npm run dev",
            "presentation": {
                "reveal": "always",
                "panel": "new"
            },
            "runOptions": {
                "runOn": "folderOpen"
            }
        }
    ]
}

This task will automatically run the npm run dev command when the project folder is opened. The next time it's opened, the task panel will show up alongside your regular terminal and that process will start automatically.

It is possible to specify an npm type of task, but I personally prefer using shell since it is the same command I'd use in my a terminal. It also means that you can run anything you want automatically.

Save your future self some time and setup some automated tasks!