CODEWITHSUNDEEP
intellisensecypress
Cristian Marin
Cristian Marin

Reputation: 101

/// <reference types= "cypress" /> not enabling intellisense in VS code

I'm having a problem trying to get code completion for Cypress while I'm using JS. I've tried following every bit of documentation I could found, but I don't find these comprehensive enough.

Upvotes: 10

Views: 24687

Answers (5)

Diogo
Diogo

Reputation: 1

Hi I was able to set it on vs code by simple adding /// I've written it previously with C from Cyberpress in lower case, after adding the C in upper case it solved my problem

Upvotes: 0

Shafiq Jetha
Shafiq Jetha

Reputation: 1564

I just added

  "compilerOptions": {
    "types": ["cypress"]
  }

to the object in the tsconfig.json file that was in the root cypress directory. I then chose "Restart TS Server" from the Command Palette and that sorted things out for me.

Upvotes: 3

karfus
karfus

Reputation: 939

None of these worked for me, what finally gave me Intellisense was adding a tsconfig.json file to the Cypress folder, as per the Cypress docs:

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

Upvotes: 6

kuceb
kuceb

Reputation: 18043

This is because you installed Cypress via the .exe, which is not the recommended way of installing Cypress.

Cypress type definitions are only installed when you install cypress via npm

For VSCode to find the type definitions, you should install cypress as a dev dependency to your project (preferred form of installation according to the docs):

npm i -D cypress

Upvotes: 2

Sergeon
Sergeon

Reputation: 6788

How I get Cypress typings to work in vscode

I had problems getting Cypress intellisense to work too. My way to get intellisense is convoluted and probably wrong, but I didn't get it to work in any other way.

  1. add a cypress.d.ts file in the root of my project with the following types syntax. This declare the cy type, so you get autocompletion for most Cypress stuff:
declare var Cypress: any;

interface CypressElement {
  type(value: string, options?: any): CypressElement,
  clear(options?: {force: boolean}): CypressElement,
  click(options?: {force: boolean}): CypressElement,
  should(...args: any): CypressElement,
  selectValue(option: number, optionsClass: string):CypressElement,
  fillInput(value: string):CypressElement,
  eq(index: number): CypressElement,
  contains(value: any): CypressElement,
  within(...args: any): any,
  trigger(...args: any): any;
  first(): CypressElement;
}

declare var cy: {
  get(select: any): CypressElement;
  window(): Promise<any>;
  visit(path: any): void;
  request(options: any): Promise<any>;
  wait(time: string | number): any;
  server(): any;
  route(...options: any): any;
  log(...messages: string[]): any;
  contains(selector: string, value: any): any;
  stub(...args: any): any;
  on(event: string, callback: any): any;
  url(): CypressElement;
};

(Declare Cypress typings manually this way seems alien at best. However, trying to use the native ones generated a lot of problems)

  1. Reference that file in the tsconf.json compiler options via:

    "typeRoots": ["cypress.d.ts"],

This just enables intellisense to Cypress, even if the cypress code is written in javaScript, since vscode relies a lot in typescript for its intellisense engine.

Since you're not using typeScript I guess, you may need to add a very simple tsconfig file at the root (so your editor can read its configuration), something like:

{
    "compilerOptions": {
        "typeRoots": ["cypress.d.ts"],
        "target": "es5",
        "module": "commonjs",
        "lib": [
            "es6"
        ],
        "declaration": true,
        "removeComments": false,
        "stripInternal": true,
        // since 2.3
        // "strict": true,
        "alwaysStrict": true,
        "noImplicitAny": true,
        "noImplicitThis": true,
        "strictNullChecks": true
    },
    "files": [
        "./index.ts"
    ]
}

Maybe you can instruct your editor to load cypress.d.ts as typeRoots, I don't know.

After this, you should have intellisense for your cy variable and for the objets that comes from cy.get() (which above are called CypressElement in that types definition).

One big caveat about this, is that whenever you use a new Cypress feature, you need to manually add its type to cypress.d.ts to get the intellisense.

Upvotes: -2

Related Questions