There is many extensions and multiple ways to run/launch/debug a project using a simple F5 key! I always developed web projects with Jetbrains PHPStorm, But last week I had to do this with VSCode and the first thing I encountered was the simple execution of the Jekyll project.

You can simply run the whole project with this command :

bundle exec Jekyll serve 

But how can we execute this command with the F5 key? This is where it gets a little annoying. VSCode can debug projects when a supported extension installed and the problem is that Jekyll extensions can not run/debug project.

With a little effort and testing different ways, I found the best way to do that. We can combine Task and Launch configuration.

1- Create tasks.json in .vscode folder like this:

{   "version": "2.0.0",   "tasks": [     {       "label": "jekyll",       "command": "bundle exec jekyll serve",       "type": "shell"     }   ] } 

This task will run the command for us.

2- Create launch.json file like this:

{   "version": "0.2.0",   "configurations": [     {       "type": "firefox",       "request": "attach",       "name": "Attach",       "preLaunchTask": "jekyll"     }   ] } 

We use Firefox launch configuration to open our browser, and also run a preLaunchTask before that!

Now you debug your project and open Firefox automatically by press the lovely F5 key 🤩