Automating task to run on startup in VSCode

Whenever I open up an npm project workspace on VSCode I usually run a few commands on startup. VSCode has been my favorite Text Editor of choice for quite sometime now, primarily due to the available customization options and the wide variety of extensions. And it didn’t fail me here😛.

What do I do every time I open a workspace?

• I open up the integrated terminal with ctrl + `
• Start the development server with npm start
• Open another terminal instance with ctrl + shift + `
• Start the test suite with npm run test

What do we, developers, do when we realize that we are doing things again and again?
Yes, we automate it!🤣

Tasks in VSCode

• We’ll be leveraging VSCode’s Tasks feature for this.
• Complete Documentation here: https://code.visualstudio.com/docs/editor/tasks
• Similar use case: These tasks can be used to run multiple steps on a build process in compiled languages for example. Or you can setup doing a git pull when on a collaborative project.
• Or even CI / CD ? - wow! let’s not do that here shall we?
• Specifically we’ll be running these tasks on opening a workspace for our use case.

Let’s do it then?

VSCode has workspace specific settings and configurations in a .vscodedirectory

• Create a tasks.json file inside the .vscode folder
• Setup the task that we want to run

• npm start and npm run test commands are the two tasks that we want to run here.
• We obviously want to see the output of these commands. So presentation reveal is set to always and each of these run on separate terminal instances
• folderOpen runOn option inside runOptions makes the task run on opening a workspace
• That’s it

Let’s try it out, shall we?

1. Open up the command Palette with ctrl + shift + p
2. Try searching for tasks and select “Tasks: Run Task”

3. Now select the “Start App” task and give it a test run and see if it works

4. You would be presented with this notification 👇, click on “Allow and run”
(if you do not see this automatically, try closing the integrated terminal, ctrl + `)

5. Reload the workspace and see if the tasks automatically run on startup. Open the command palette with ctrl + shift + p and type “reload”, select “Developer: Reload Window”,

As soon as the workspace is opened, the integrated terminal should open up and you should see the tasks should start running.

Bonus:

If you didn’t know you can open previously opened workspaces using the ctrl + r shortcut

Try it out and share what you automated with this VSCode feature!

Hey👋 — I’m Divakar Rajesh, a Product Engineer at Sensara — You’ve probably interacted with our products if you have tried Xiaomi Mi Remote. We’re also the default TV Guide/Launcher on some popular smart TVs including the MiTV anddd we also power recommendations and live TV discovery on all Airtel Smart Set-top boxes.

On a personal note😛, you can find me on twitter and other socials as @sdivakarrajesh — Shameless plug 🤦‍♂️ — See ya..