In Cucumber, how do you resolve "Was unable to find step for" error when using {int} in a step definition?

Question

I am building a Cucumber framework for WebdriverIO using Visual Studio Code.

I have a step definition which reads:

Then("there are/is {int} {string} displayed", (elementCount, element) => {
    expect(BasePage.getElementCount(BasePage.getElement(element))).toBe(elementCount);
});

And then in my feature file, I have the following scenario:

Background: There have been 2 new products added to the site
    Given I have created a "Product Name" via the API
        And I have created a "Product Name" via the API
        And I have gone to the "Products" page
        And the "Product Name" is not displayed

Scenario: User searches for the product
    When I set the "Search Field" to "Product Name"
    Then there are 2 "Product Name" displayed

However, I get a random yellow squiggly line ("contains emphasized items") underneath the Then step saying:

Was unable to find step for "Then there are 2 "Product Name" displayed" cucumberautocomplete

All my other step definitions that don't use the {int} parameter are fine and the entire feature file still executes correctly (even with the squiggly line), but visually, I would like this "contains emphasized items" error to disappear from the step definitions that include {int}.

I'm unsure whether this is a problem with VS Code, or WDIO, or the VS Code Cucumber extension.

My cucumber options in my wdio.conf.js file are as follows:

// If you are using Cucumber you need to specify the location of your step definitions.
    cucumberOpts: {
        // <string[]> (file/dir) require files before executing features
        require: [`./wdio/steps/**/*.steps.js`],
        // <boolean> show full backtrace for errors
        backtrace: false,
        // <string[]> ("extension:module") require files with the given EXTENSION after requiring MODULE (repeatable)
        requireModule: [`@babel/register`],
        // <boolean> invoke formatters without executing steps
        dryRun: false,
        // <boolean> abort the run on first failure
        failFast: false,
        // <string[]> (type[:path]) specify the output format, optionally supply PATH to redirect formatter output (repeatable)
        format: [`pretty`],
        // <boolean> hide step definition snippets for pending steps
        snippets: true,
        // <boolean> hide source uris
        source: true,
        // <string[]> (name) specify the profile to use
        profile: [],
        // <boolean> fail if there are any undefined or pending steps
        strict: false,
        // <string> (expression) only execute the features or scenarios with tags matching the expression
        tagExpression: `not @skip`,
        // <number> timeout for step definitions
        timeout: 60000,
        // <boolean> Enable this config to treat undefined definitions as warnings.
        ignoreUndefinedDefinitions: false
    },

My cucumber autocomplete settings in my settings.json file are as follows:

{
    "cucumberautocomplete.steps": ["./wdio/steps/**/*.steps.js"],
    "cucumberautocomplete.syncfeatures": "./wdio/features/**/*.feature",
    "cucumberautocomplete.strictGherkinCompletion": true,
    "cucumberautocomplete.strictGherkinValidation": true,
    "cucumberautocomplete.smartSnippets": true,
    "cucumberautocomplete.stepsInvariants": true,
    "cucumberautocomplete.skipDocStringsFormat": true,
    "cucumberautocomplete.formatConfOverride": {
        "And": 3,
        "But": "relative"
    },
    "cucumberautocomplete.onTypeFormat": true,
    "editor.quickSuggestions": {
        "other": true,
        "comments": false,
        "strings": true
    },
    "cucumberautocomplete.gherkinDefinitionPart": "(Given|When|Then)\\("
}

Many thanks in advance.

Answer 1

UPON FURTHER INVESTIGATION, THIS SOLUTION DOESN'T ACTUALLY EXECUTE THE STEPS

Answer: Replace are/is with (are|is) in your step definition. [Credit @rioV8]

Investigation:

If anybody is keen to understand why these squiggly lines appeared in the first place, I completed a short investigation below.

Conclusion:

If your step definition contains {string}, you cannot use / before the {string} is defined.

To support this, here are the incorrect step definitions which resulted in a yellow squiggly line:

Step Definitions:

Then("the apple/banana is {string} string today", (string) => {
    return string;
});
Then("the apple/banana is {string} string and {string} string today", (string1, string2) => {
    return string1 + string2;
});
Then("the apple/banana is {string} string and {int} int today", (string, int) => {
    return string + int;
});
Then("the apple/banana is {int} int and {string} string today", (int, string) => {
    return int + string;
});
Then("the {int} int apple/banana is {string} string today", (int, string) => {
    return int + string;
});

Feature Steps:

Then the apple is "fruit" string today
Then the apple is "fruit" string and "red" string today
Then the apple is "fruit" string and 1 int today
Then the apple is 1 int and "fruit" string today
Then the 1 int apple is "fruit" string today

Note: All these step definitions were resolved by changing apple/banana to (apple|banana).