How to launch Jekyll project in VS Code

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 🤩