Photo by Douglas Lopes via Unsplash
Photo by Douglas Lopes via Unsplash

Are you annoyed of the two clicks and one line command to start your development server (or development watching process) each time you open VSCode? Then I can help you ;]

I recently and finally got around to read through all the docs and found out that there is an easy way to do this in VSCode, via “Task configuration”.

Create a .vscode/tasks.json (or add to an existing file) in your project:

 1{
 2  "version": "2.0.0",
 3  "presentation": {
 4    "echo": false,
 5    "reveal": "always",
 6    "focus": false,
 7    "panel": "dedicated",
 8    "showReuseMessage": true
 9  },
10  "tasks": [
11    {
12      // The name that shows up in terminal tab
13      "label": "Run server",
14      // The task will launch a shell
15      "type": "shell",
16      // What do you want to run?
17      "command": "npm run server",
18      // Set the shell type
19      "options": {
20        "shell": {
21          // Put your shell program in here and add whatever configuration
22          // params are needed _before_ the `command` above is added to the full
23          // run command
24          "executable": "bash",
25          "args": [
26            "-c"
27          ]
28        }
29      },
30      // Some display options
31      "presentation": {
32        "echo": true,
33        "reveal": "always",
34        "focus": true,
35        "panel": "shared",
36        "showReuseMessage": false,
37        "clear": true
38      },
39      // Mark as the default build task so cmd/ctrl+shift+b will create them
40      "group": {
41        "kind": "build",
42        "isDefault": true,
43        // this is the profile name you can use to color/iconise the terminal
44        "profile": "npm-server"
45      },
46      // Mark as a background task to avoid the spinner animation on the
47      // terminal tab
48      "isBackground": true,
49      // Not sure about that one. Might be omissible.
50      "problemMatcher": [],
51      // Try start the task on folder open
52      "runOptions": {
53        "runOn": "folderOpen",
54        // run only one instance (meaning it will kill the previous run or ask
55        // if the currently running process should be killed/restarted)
56        "instanceLimit": 1
57      }
58    },
59  ]
60}

This will create a task, that will run npm run server (see line 17) when you open a folder or workspace in VSCode. Type CTRL + SHIFT + P and then search for “Tasks: Manage Automatic Tasks in Folder” and select to allow automatic tasks and you are good to go.

You can start or restart the task manually by typing CTRL + SHIFT + B , but after the change above whenever you open your workspace or folder it will start automatically for you.

As an added bonus, you can configure the look (icon and color) of the automatic terminal with some lines in your user configuration:

1{
2  "terminal.integrated.automationProfile.linux": {
3    "color": "terminal.ansiCyan",
4    "icon": "server-environment",
5    "name": "npm-server",
6    "path": ""
7  },
8}

Make sure that the name (in my example npm-server) matches the tasks.group.profile value of your task setup. If you edit these files in VSCode itself you will receive hints about possible values on CTRL + SPACE .