Lost intellisense for cypress in visual studio code

Question

I got a very strange problem.

I created a cypress project very basic and simple one, only examples test cases and did not have any other devDependencies only cypress.

when I first open this project in visual studio code, after mouse hovers to a method I can see a popup with some Signature help and right click the method chose to "go to definition" I able to open that file.

Strange things happened after I write a code "cy.", it supposes to give me intelligent code suggestions, but no any suggestions and mouse hover to any method the Signature help is disappeared and right click the method chose to "go to definition" I got "No definition found for 'XXX'"

I have asked many developers, but no one able to answer, please help, thank you!

Answer 1

Please check if your file has a triple-slash directive at the top of it, like

/// <reference types="Cypress" />

If it's the case, try to add a tsconfig.json inside your cypress folder. From cypress documentation a tsconfig.json with the following configuration should get intelligent code completion working.

{
  "compilerOptions": {
    "allowJs": true,
    "baseUrl": "../node_modules",
    "types": [
      "cypress"
    ]
  },
  "include": [
    "**/*.*"
  ]
}

Answer 2

I had the same behaviour you describe in your comment of Sep 23rd. I realised that it was caused by my custom cypress commands. Before chaining my custom commands I would get code completion, but not after.

To solve it, in cypress/support I added a an index.d.ts file with the following content:

declare namespace Cypress {
  interface Chainable<Subject> {
    /**
     * Log in via UI
     * @example
     * cy.login(username: string, password: string)
     */
    login(): Chainable<any>
    /**
     * Log in via API
     * @example
     * cy.apiLogin()
     */
    apiLogin(): Chainable<any>

    /**
     * Wait for viewer to load
     * @example
     *  cy.waitForFirstLoad()
     */
    waitForFirstLoad(): Chainable<any>

    /**
     * Log out
     * @example
     *  cy.logout()
     */
    logout(): Chainable<any>
  }
}

I also modified cypress/tsconfig.json as follows:

{
    "compilerOptions": {
        "allowJs": true,
        "baseUrl": "../node_modules",
        "types": ["cypress", "../support"]
    },
    "include": ["**/*.*"]
}

Hope it helps