DEV Community

loading...
Cover image for Automatically Start Scripts On Launch In VSCode

Automatically Start Scripts On Launch In VSCode

5t3ph profile image Stephanie Eckles ใƒป2 min read

VSCode comes with the ability to create tasks that operate off of a variety of things. One option is to run one of your package scripts upon opening your project in VSCode.

For myself, I create a lot of sites with Eleventy so my npm start command runs Eleventy in --serve mode which means it includes creating a local server with Browsersync. Opening any of my Eleventy projects quite likely means I want to make edits and have that server running. So let's learn how to launch it automatically!

Create A Task

To add the launch task, add the directory .vscode to the root of your project if it doesn't already exist.

Then, create the file tasks.json. This is the required name to enable detection by VSCode.

Add the following as the content of that file:

{
  // See https://go.microsoft.com/fwlink/?LinkId=733558
  // for the documentation about the tasks.json format
  "version": "2.0.0",
  "tasks": [
    {
      "type": "npm",
      "script": "start",
      "label": "Launch Site",
      "group": "none",
      "presentation": {
        "reveal": "always",
        "panel": "new"
      },
      "runOptions": {
        "runOn": "folderOpen"
      }
    }
  ]
}
Enter fullscreen mode Exit fullscreen mode

Configure the following if needed:

  • script - update to the name of your script if it's not start
  • label - this can be whatever you want!

Leave the other options as-is. The runOptions enables running the command on start (folderOpen), and the presentation set of options means that a new Terminal will be opened to reveal the task running.

Allow The Task To Run

There's one more step before this will work which is to manually run it once and allow permission for the auto run behavior.

To do this, use the VSCode menu for Terminal and select Run Task, then select "Launch Site" (or your custom name if you updated it). You will be prompted to make a selection on the type of scan (if unsure, choose the top option).

The task will then run. When the launch task completes, end it with Ctrl + C.

You will receive one final popup message asking for your permission to run the task on open of the folder. Select "Allow and run".

The previously described popup including the action of Allow and run

Now, completely close and restart VSCode and your task should now run right after it opens!

Discussion (5)

pic
Editor guide
Collapse
ra1nbow1 profile image
Matvey Romanov

Idk is it really useful, but rather intersting

Collapse
cavo789 profile image
Christophe Avonture • Edited

My use case would be (=need to be tested) to create a task for "docker-compose up -d" i.e. start my project inside a Docker container. So, every time I'll open my project in vscode, the container will be started automatically. If so, it's really nice and will facilitate the use of "docker-compose exec xxxx" i.e. run commands inside the container (like running phpunit).

Collapse
killshot13 profile image
Michael R.

@5t3ph thanks for the info, I can definitely envision some potential use cases for this type of configuration.

@cavo789 I'm wondering if the environment could be made even more specific, especially for Docker containers, such that scripts would be defined at either the workspace or project level to support an already ideally configured environment? I am interested to experiment further with this. ๐Ÿง

Thread Thread
cavo789 profile image
Christophe Avonture

Hello, just tested and small doc written (github.com/cavo789/vscode_tips#fir...)

In my case, the how-to is not really like described in the article.

But I can confirm that, now, everytime I open my project, Docker is fired and my containers are built/loaded. And that's cool!

Collapse
iamspruce profile image
spruce

Wow. Really useful, like I didn't even know this was possible. Thanks