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

Question

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.

Hearthstone

what version of cypress are you on? does the file node_modules/cypress/types/index.d.ts exist? does vscode colorize the /// <reference types="cypress"/> line? or is it all one color? – Greenberg

Hi @bkucera, the /// <reference types="cypress"/> is colorized, and I am not able to find the node_modules/cypress/types/index.d.ts. What is this file supposed to contain? Sorry for the noob question, I am really new to this. Regards – Hearthstone

What version of Cypress? – Greenberg

Did you install via NPM? – Greenberg

Version 3.1.5, I installed it via the .exe file. – Hearthstone

Answer 1

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": ["**/*.*"]
}

Pairoar

Link to relevant docs: docs.cypress.io/guides/tooling/… – Awad

Yep. In fact, using files in the cypress/tsconfig.json might also give you trouble. Have to use include/exclude . Wierd, and hard to figure out. – Broadsword

Answer 2

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.

Bowling

Answer 3

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

Greenberg

Hi, I've installed it with npm i -g cypress and I get the same "/// <reference types="cypress"/>" colorized. Is there something else I might be overlooking? Thanks! – Hearthstone

It&#39;s more difficult for vscode to pick up global types, so you might have to install locally npm i -D cypress – Greenberg

This worked for me. – Jerold

Answer 4

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

Trinity

Answer 5

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)

2. 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.

Supportable

You sir, you saved me! This works! Thank you very much! – Hearthstone

this doesn't seem like a sensible solution; maintaining your own type definitions is much more difficult than properly pointing your editor to the correct ones – Greenberg

That is what I say in the first line of the answer :-). I think this is better than not having intellisense at all. – Supportable

This is not the way. Proper config of tsconfig.json files will solve this better, although it is a bit tricksy. – Broadsword