How to link feature files with step definition in CodeceptJS?

I'm trying to implement the BDD framework in CodeceptJS using PHPStorm as my IDE. But for some reason it is not recognising the step definitions and in the feature file it shows the error

Undefined step reference

I followed the steps given in the CodeceptJS documentation such as codeceptjs gherkin:init (which implemented the gherkins module) and codeceptjs gherkin:snippets (which implements the step definition automatically) I'm running on

MacOS
CodeceptJS on PHPStorm
Selenium Server with ChromeDriver

My codecept.conf.js file

exports.config = {
  output: './output',
  helpers: {
    WebDriver: {
      smartWait: 10000,
      url: 'my_url',
      browser: 'chrome'
    }
  },
  include: {
    I: './steps_file.js',
    assignmentsPage: './pages/AssignmentsPageObject.js'
  },
  mocha: {},
  bootstrap: null,
  teardown: null,
  hooks: [],
  gherkin: {
    features: './features/*.feature',
    steps: ['./step_definitions/steps.js']
  },
  plugins: {
    screenshotOnFail: {
      enabled: true
    }
  },
  tests: './*_test.js',
  name: 'AssignmentsClient'
}

I expect the framework to detect the step defintion corresponding to the various scenarios mentioned in the feature file.

Can someone help me here?

Solution

Update: The reason why the BDD framework wasn't being recognised is because PHPStorm doesn't support a cucumber plugin. So it shows undefined only in the IDE. Once you start running the tests from the terminal, it gets recognised and works accordingly.