{
"doc": {
"id": "app/tooling/IDE-integration",
"title": "IDE Integration with Cypress: VSCode, IntelliJ, and more",
"description": "Learn how to open files in your IDE, set up intelligent code completion, and find extensions and plugins for popular IDEs.",
"section": "app",
"source_path": "/llm/markdown/app/tooling/IDE-integration.md",
"version": "ce02913654e2655ee63448bdc92bb92c7b46a619",
"updated_at": "2026-04-22T19:37:51.587Z",
"headings": [
{
"id": "app/tooling/IDE-integration#ide-integration",
"text": "IDE Integration",
"level": 1
},
{
"id": "app/tooling/IDE-integration#what-youll-learn",
"text": " What you'll learn",
"level": 5
},
{
"id": "app/tooling/IDE-integration#file-opener-preference",
"text": "File Opener Preference",
"level": 2
},
{
"id": "app/tooling/IDE-integration#extensions-plugins",
"text": "Extensions & Plugins",
"level": 2
},
{
"id": "app/tooling/IDE-integration#visual-studio-code",
"text": "Visual Studio Code",
"level": 3
},
{
"id": "app/tooling/IDE-integration#intellij-platform",
"text": "IntelliJ Platform",
"level": 3
},
{
"id": "app/tooling/IDE-integration#intelligent-code-completion",
"text": "Intelligent Code Completion",
"level": 2
},
{
"id": "app/tooling/IDE-integration#writing-tests",
"text": "Writing Tests",
"level": 3
},
{
"id": "app/tooling/IDE-integration#features",
"text": "Features",
"level": 4
},
{
"id": "app/tooling/IDE-integration#autocomplete-while-typing-cypress-commands",
"text": "Autocomplete while typing Cypress commands",
"level": 5
},
{
"id": "app/tooling/IDE-integration#signature-help-when-writing-and-hovering-on-cypress-commands",
"text": "Signature help when writing and hovering on Cypress commands",
"level": 5
},
{
"id": "app/tooling/IDE-integration#autocomplete-while-typing-assertion-chains-including-only-showing-dom-assertions-if-testing-on-a-dom-element",
"text": "Autocomplete while typing assertion chains, including only showing DOM assertions if testing on a DOM element.",
"level": 5
},
{
"id": "app/tooling/IDE-integration#set-up-in-your-dev-environment",
"text": "Set up in your Dev Environment",
"level": 4
},
{
"id": "app/tooling/IDE-integration#triple-slash-directives",
"text": "Triple slash directives",
"level": 5
},
{
"id": "app/tooling/IDE-integration#reference-type-declarations-via-jsconfig",
"text": "Reference type declarations via jsconfig",
"level": 5
},
{
"id": "app/tooling/IDE-integration#reference-type-declarations-via-tsconfig",
"text": "Reference type declarations via tsconfig",
"level": 5
},
{
"id": "app/tooling/IDE-integration#see-also",
"text": "See also",
"level": 3
}
]
},
"content": {
"type": "root",
"children": [
{
"type": "heading",
"depth": 1,
"children": [
{
"type": "text",
"value": "IDE Integration"
}
]
},
{
"type": "heading",
"depth": 5,
"children": [
{
"type": "text",
"value": " What you'll learn"
}
]
},
{
"type": "list",
"ordered": false,
"start": null,
"spread": false,
"children": [
{
"type": "listItem",
"spread": false,
"checked": null,
"children": [
{
"type": "paragraph",
"children": [
{
"type": "text",
"value": "How to open files in your IDE"
}
]
}
]
},
{
"type": "listItem",
"spread": false,
"checked": null,
"children": [
{
"type": "paragraph",
"children": [
{
"type": "text",
"value": "Extensions and plugins for popular IDEs"
}
]
}
]
},
{
"type": "listItem",
"spread": false,
"checked": null,
"children": [
{
"type": "paragraph",
"children": [
{
"type": "text",
"value": "How to set up intelligent code completion in your IDE"
}
]
}
]
}
]
},
{
"type": "heading",
"depth": 2,
"children": [
{
"type": "text",
"value": "File Opener Preference"
}
]
},
{
"type": "paragraph",
"children": [
{
"type": "text",
"value": "When clicking on a file path or an "
},
{
"type": "link",
"title": null,
"url": "/llm/markdown/app/guides/debugging.md#Errors",
"children": [
{
"type": "text",
"value": "error"
}
]
},
{
"type": "text",
"value": " in\nthe "
},
{
"type": "link",
"title": null,
"url": "/llm/markdown/app/core-concepts/open-mode.md#Command-Log",
"children": [
{
"type": "text",
"value": "command log"
}
]
},
{
"type": "text",
"value": ", Cypress will\nattempt to open the file on your system. If the editor supports inline\nhighlighting of the file, the file will open with the cursor located on the line\nand column of interest."
}
]
},
{
"type": "paragraph",
"children": [
{
"type": "text",
"value": "The first time you click a file path, Cypress will prompt you to select which\nlocation you prefer to open the file. You can choose to open it in your:"
}
]
},
{
"type": "list",
"ordered": false,
"start": null,
"spread": false,
"children": [
{
"type": "listItem",
"spread": false,
"checked": null,
"children": [
{
"type": "paragraph",
"children": [
{
"type": "text",
"value": "File system (e.g. Finder on MacOS, File Explore on Windows)"
}
]
}
]
},
{
"type": "listItem",
"spread": false,
"checked": null,
"children": [
{
"type": "paragraph",
"children": [
{
"type": "text",
"value": "An IDE located on your system"
}
]
}
]
},
{
"type": "listItem",
"spread": false,
"checked": null,
"children": [
{
"type": "paragraph",
"children": [
{
"type": "text",
"value": "A specified application path"
}
]
}
]
}
]
},
{
"type": "paragraph",
"children": [
{
"type": "text",
"value": "Cypress attempts to find available file editors on your system and display those\nas options. If your preferred editor is not listed, you can specify the (full)\npath to it by selecting Other. Cypress will make every effort to open the\nfile, but it is not guaranteed to work with every application."
}
]
},
{
"type": "paragraph",
"children": [
{
"type": "text",
"value": "After setting your file opener preference, any files will automatically open in\nyour selected application without prompting you to choose. If you want to change\nyour selection, you can do so in the Settings tab of Cypress by clicking\nunder File Opener Preference."
}
]
},
{
"type": "heading",
"depth": 2,
"children": [
{
"type": "text",
"value": "Extensions & Plugins"
}
]
},
{
"type": "paragraph",
"children": [
{
"type": "text",
"value": "There are many third-party IDE extensions and plugins to help integrate your IDE\nwith Cypress."
}
]
},
{
"type": "heading",
"depth": 3,
"children": [
{
"type": "text",
"value": "Visual Studio Code"
}
]
},
{
"type": "list",
"ordered": false,
"start": null,
"spread": false,
"children": [
{
"type": "listItem",
"spread": false,
"checked": null,
"children": [
{
"type": "paragraph",
"children": [
{
"type": "link",
"title": null,
"url": "https://marketplace.visualstudio.com/items?itemName=JosefBiehler.cypress-fixture-intellisense",
"children": [
{
"type": "text",
"value": "Cypress Fixture-IntelliSense"
}
]
},
{
"type": "text",
"value": ":\nSupports your "
},
{
"type": "link",
"title": null,
"url": "/llm/markdown/api/commands/fixture.md",
"children": [
{
"type": "text",
"value": "cy.fixture()"
}
]
},
{
"type": "text",
"value": " by providing intellisense\nfor existing fixtures."
}
]
}
]
},
{
"type": "listItem",
"spread": false,
"checked": null,
"children": [
{
"type": "paragraph",
"children": [
{
"type": "link",
"title": null,
"url": "https://marketplace.visualstudio.com/items?itemName=shevtsov.vscode-cy-helper",
"children": [
{
"type": "text",
"value": "Cypress Helper"
}
]
},
{
"type": "text",
"value": ":\nVarious helpers and commands for integration with Cypress."
}
]
}
]
},
{
"type": "listItem",
"spread": false,
"checked": null,
"children": [
{
"type": "paragraph",
"children": [
{
"type": "link",
"title": null,
"url": "https://marketplace.visualstudio.com/items?itemName=andrew-codes.cypress-snippets",
"children": [
{
"type": "text",
"value": "Cypress Snippets"
}
]
},
{
"type": "text",
"value": ":\nUseful Cypress code snippets."
}
]
}
]
},
{
"type": "listItem",
"spread": false,
"checked": null,
"children": [
{
"type": "paragraph",
"children": [
{
"type": "link",
"title": null,
"url": "https://marketplace.visualstudio.com/items?itemName=CliffSu.cypress-snippets",
"children": [
{
"type": "text",
"value": "Cypress Snippets"
}
]
},
{
"type": "text",
"value": ":\nThis extension includes the newest and most common cypress snippets."
}
]
}
]
},
{
"type": "listItem",
"spread": false,
"checked": null,
"children": [
{
"type": "paragraph",
"children": [
{
"type": "link",
"title": null,
"url": "https://marketplace.visualstudio.com/items?itemName=tnrich.vscode-extension-open-cypress",
"children": [
{
"type": "text",
"value": "Open Cypress"
}
]
},
{
"type": "text",
"value": ":\nAllows you to open Cypress specs and single `it()` blocks directly from VS\nCode."
}
]
}
]
},
{
"type": "listItem",
"spread": false,
"checked": null,
"children": [
{
"type": "paragraph",
"children": [
{
"type": "link",
"title": null,
"url": "https://marketplace.visualstudio.com/items?itemName=chrisbreiding.test-utils",
"children": [
{
"type": "text",
"value": "Test Utils"
}
]
},
{
"type": "text",
"value": ":\nEasily add or remove `.only` and `.skip` modifiers with keyboard shortcuts or\nthe command palette."
}
]
}
]
},
{
"type": "listItem",
"spread": false,
"checked": null,
"children": [
{
"type": "paragraph",
"children": [
{
"type": "link",
"title": null,
"url": "https://marketplace.visualstudio.com/items?itemName=dpanshug.cypress-test-explorer",
"children": [
{
"type": "text",
"value": "Cypress Test Explorer"
}
]
},
{
"type": "text",
"value": ":\nHelps you discover, navigate and run Cypress tests directly from the editor."
}
]
}
]
}
]
},
{
"type": "heading",
"depth": 3,
"children": [
{
"type": "text",
"value": "IntelliJ Platform"
}
]
},
{
"type": "list",
"ordered": false,
"start": null,
"spread": true,
"children": [
{
"type": "listItem",
"spread": false,
"checked": null,
"children": [
{
"type": "paragraph",
"children": [
{
"type": "link",
"title": null,
"url": "https://plugins.jetbrains.com/plugin/20175-test-automation",
"children": [
{
"type": "text",
"value": "Test Automation plugin"
}
]
},
{
"type": "text",
"value": ": The official plugin, developed and maintained by JetBrains, offering robust support for Cypress and compatible with IntelliJ IDEA, CLion, GoLand, PhpStorm, PyCharm, Rider, RubyMine, and WebStorm. It encompasses all the features found in JetBrains Aqua."
}
]
}
]
},
{
"type": "listItem",
"spread": false,
"checked": null,
"children": [
{
"type": "paragraph",
"children": [
{
"type": "link",
"title": null,
"url": "https://plugins.jetbrains.com/plugin/13819-intellij-cypress",
"children": [
{
"type": "text",
"value": "Cypress Support"
}
]
},
{
"type": "text",
"value": ": Integrates Cypress under the common Intellij test framework."
}
]
}
]
}
]
},
{
"type": "heading",
"depth": 2,
"children": [
{
"type": "text",
"value": "Intelligent Code Completion"
}
]
},
{
"type": "heading",
"depth": 3,
"children": [
{
"type": "text",
"value": "Writing Tests"
}
]
},
{
"type": "heading",
"depth": 4,
"children": [
{
"type": "text",
"value": "Features"
}
]
},
{
"type": "paragraph",
"children": [
{
"type": "text",
"value": "IntelliSense is available for Cypress. It offers intelligent code suggestions\ndirectly in your IDE while writing tests. A typical IntelliSense popup shows\ncommand definition, a code example and a link to the full documentation page."
}
]
},
{
"type": "heading",
"depth": 5,
"children": [
{
"type": "text",
"value": "Autocomplete while typing Cypress commands"
}
]
},
{
"type": "heading",
"depth": 5,
"children": [
{
"type": "text",
"value": "Signature help when writing and hovering on Cypress commands"
}
]
},
{
"type": "heading",
"depth": 5,
"children": [
{
"type": "text",
"value": "Autocomplete while typing assertion chains, including only showing DOM assertions if testing on a DOM element."
}
]
},
{
"type": "heading",
"depth": 4,
"children": [
{
"type": "text",
"value": "Set up in your Dev Environment"
}
]
},
{
"type": "paragraph",
"children": [
{
"type": "text",
"value": "This document assumes you have\n"
},
{
"type": "link",
"title": null,
"url": "/llm/markdown/app/get-started/install-cypress.md",
"children": [
{
"type": "text",
"value": "installed Cypress"
}
]
},
{
"type": "text",
"value": "."
}
]
},
{
"type": "paragraph",
"children": [
{
"type": "text",
"value": "Cypress comes with TypeScript\n"
},
{
"type": "link",
"title": null,
"url": "https://github.com/cypress-io/cypress/tree/develop/cli/types",
"children": [
{
"type": "text",
"value": "type declarations"
}
]
},
{
"type": "text",
"value": "\nincluded. Modern text editors can use these type declarations to show\nIntelliSense inside spec files."
}
]
},
{
"type": "heading",
"depth": 5,
"children": [
{
"type": "text",
"value": "Triple slash directives"
}
]
},
{
"type": "paragraph",
"children": [
{
"type": "text",
"value": "The simplest way to see IntelliSense when typing a Cypress command or assertion\nis to add a\n"
},
{
"type": "link",
"title": null,
"url": "http://www.typescriptlang.org/docs/handbook/triple-slash-directives.html",
"children": [
{
"type": "text",
"value": "triple-slash directive"
}
]
},
{
"type": "text",
"value": "\nto the head of your JavaScript or TypeScript testing file. This will turn the\nIntelliSense on a per file basis. Copy the comment line below and paste it into\nyour spec file."
}
]
},
{
"type": "code",
"lang": "js",
"meta": null,
"value": "/// "
},
{
"type": "paragraph",
"children": [
{
"type": "text",
"value": "If you write "
},
{
"type": "link",
"title": null,
"url": "/llm/markdown/api/cypress-api/custom-commands.md",
"children": [
{
"type": "text",
"value": "custom commands"
}
]
},
{
"type": "text",
"value": " and provide\nTypeScript definitions for them, you can use the triple slash directives to show\nIntelliSense, even if your project uses only JavaScript. For example, if your\ncustom commands are written in `cypress/support/commands.js` and you describe\nthem in `cypress/support/index.d.ts` use:"
}
]
},
{
"type": "code",
"lang": "js",
"meta": null,
"value": "// type definitions for Cypress object \"cy\"\n/// \n\n// type definitions for custom commands like \"createDefaultTodos\"\n/// "
},
{
"type": "paragraph",
"children": [
{
"type": "text",
"value": "If the triple slash directive does not work, please refer to your code editor in\n"
},
{
"type": "link",
"title": null,
"url": "https://github.com/Microsoft/TypeScript/wiki/TypeScript-Editor-Support",
"children": [
{
"type": "text",
"value": "TypeScript's Editor Support doc"
}
]
},
{
"type": "text",
"value": "\nand follow the instructions for your IDE to get\n"
},
{
"type": "link",
"title": null,
"url": "/llm/markdown/app/tooling/typescript-support.md",
"children": [
{
"type": "text",
"value": "TypeScript support"
}
]
},
{
"type": "text",
"value": " and intelligent code\ncompletion configured in your developer environment first. TypeScript support is\nbuilt in for "
},
{
"type": "link",
"title": null,
"url": "https://code.visualstudio.com/",
"children": [
{
"type": "text",
"value": "Visual Studio Code"
}
]
},
{
"type": "text",
"value": ",\n"
},
{
"type": "link",
"title": null,
"url": "https://www.visualstudio.com/",
"children": [
{
"type": "text",
"value": "Visual Studio"
}
]
},
{
"type": "text",
"value": ", and\n"
},
{
"type": "link",
"title": null,
"url": "https://www.jetbrains.com/webstorm/",
"children": [
{
"type": "text",
"value": "WebStorm"
}
]
},
{
"type": "text",
"value": " - all other editors require\nextra setup."
}
]
},
{
"type": "heading",
"depth": 5,
"children": [
{
"type": "text",
"value": "Reference type declarations via jsconfig"
}
]
},
{
"type": "paragraph",
"children": [
{
"type": "text",
"value": "Instead of adding triple slash directives to each JavaScript spec file, some\nIDEs (like VS Code) understand a common `jsconfig.json` file in the root of the\nproject. In that file, you can include the Cypress module and your test folders."
}
]
},
{
"type": "code",
"lang": "json",
"meta": null,
"value": "{\n \"include\": [\"./node_modules/cypress\", \"cypress/**/*.js\"]\n}"
},
{
"type": "paragraph",
"children": [
{
"type": "text",
"value": "The Intelligent Code Completion should now show help for `cy` commands inside\nregular JavaScript spec files."
}
]
},
{
"type": "heading",
"depth": 5,
"children": [
{
"type": "text",
"value": "Reference type declarations via tsconfig"
}
]
},
{
"type": "paragraph",
"children": [
{
"type": "text",
"value": "Adding a\n"
},
{
"type": "link",
"title": null,
"url": "http://www.typescriptlang.org/docs/handbook/tsconfig-json.html",
"children": [
{
"type": "text",
"value": "`tsconfig.json`"
}
]
},
{
"type": "text",
"value": "\ninside your\n"
},
{
"type": "link",
"title": null,
"url": "/llm/markdown/app/core-concepts/writing-and-organizing-tests.md#Folder-structure",
"children": [
{
"type": "text",
"value": "`cypress` folder"
}
]
},
{
"type": "text",
"value": "\nwith the following configuration should get intelligent code completion working."
}
]
},
{
"type": "code",
"lang": "json",
"meta": null,
"value": "{\n \"compilerOptions\": {\n \"allowJs\": true,\n \"types\": [\"cypress\"]\n },\n \"include\": [\"**/*.*\"]\n}"
},
{
"type": "heading",
"depth": 3,
"children": [
{
"type": "text",
"value": "See also"
}
]
},
{
"type": "list",
"ordered": false,
"start": null,
"spread": false,
"children": [
{
"type": "listItem",
"spread": false,
"checked": null,
"children": [
{
"type": "paragraph",
"children": [
{
"type": "link",
"title": null,
"url": "https://github.com/bahmutov/test-todomvc-using-app-actions#intellisense",
"children": [
{
"type": "text",
"value": "Adding custom properties to the global `window` with the right TypeScript type"
}
]
}
]
}
]
}
]
}
]
},
"token_estimate": 1101
}