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"
}
}
]
}
Configure the following if needed:
-
script- update to the name of your script if it's notstart -
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".
Now, completely close and restart VSCode and your task should now run right after it opens!
Top comments (5)
Idk is it really useful, but rather intersting
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).
@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. 🧐
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!
Wow. Really useful, like I didn't even know this was possible. Thanks