Helpful VSCode Setup

If you aren't using Visual Studio Code (VSCode) you can skip this page.

Debug Setup

Initial Setup

1. If you don't already have a .vscode folder in your root directory then create one
2. Create a file called launch.json
3. Copy and paste the following code into the file

{
    // Use IntelliSense to learn about possible Node.js debug attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Debug",
            "runtimeExecutable": "npm.cmd",
            "cwd": "${workspaceRoot}",
            "env":{
               "NODE_PATH": "${workspaceRoot}/node_modules"
            },
            "runtimeArgs": [
                "run-script", "debug"
            ],
            "port": 1337
        }
    ]
} 

4. Verify that you have the following line in the scripts section of the package.json file. If not then add it.

  "scripts": {
    "debug": "node --inspect=1337 --debug-brk --nolazy node_modules/cucumber/bin/cucumber-js --tags @debug --format json:./reports/report.json",
}

How to Debug

1. Tag the Scenarios you want to debug with the @debug tag
2. Add breakpoints to the part of the code you want to stop on
3. Navigate to Debug Ctrl + Shift + d and click "Start Debugging"

Setting up Cucumber Language Support

Cucumber (Gherkin) Full Support by Alexander Krechik is a really helpful extension for help with syntax highlighting, autocompletion, snippets, etc for CucumberJS .feature files. While this is not necessary it does help make creating and maintaining .feature files easier.

1. If you don't already have a .vscode folder in your root directory then create one
2. 2. Create a file called settings.json
3. Copy and paste the following code into workspace settings

{
    "cucumberautocomplete.steps": [
        "features/step_definitions/*.js"
    ],
    "cucumberautocomplete.syncfeatures": "features/*.feature",
    "cucumberautocomplete.strictGherkinCompletion": true
}

4. Click on the "Extensions" icon on the left side of the screen
5. Search for the Cucumber (Gherkin) Full Support extension by Alexander Krechik
6. Click the "Install" button
7. When the installation is complete, click the "Reload" button
8. When the reload is complete, navigate to a .feature file, and you should notice the file has syntax highlighting. (If you don't have a .feature file you check it when you create one)

Change the icon pack

Halfway through creating this wiki I changed the standard icon pack that is standard with VSCode. There are plenty of icon packs to choose from in the extensions search, but I decided on VSCode Great Icons. What I really enjoy about this icon pack is the .feature file icon.

1. Navigate to extensions and search for VSCode Great Icons
2. Click the "Install' button and wait for the icon pack to download
3. Now bring up the command palette by using the shortcut CTRL + SHIFT + P or F1
4. Type "Preferences: File Icon Theme"
5. Select "VSCode Great Icons" from the list