Intelligent code completion using JSON schemas is supported by default in Visual Studio Code and Visual Studio. All other editors will require extra configuration or plugins for JSON schema support.
To set up in Visual Studio Code you can open Preferences / Settings / User Settings and add the json.schemas property. Make sure to replace cypress.json with your configuration file if not the default.As we are using VS Code as our IDE, in this section we will learn how to add Cypress IntelliSense in it.
We will learn more methods of Cypress as we progress through but will add the IntelliSense. We can do this by 2 ways,
Method 1: Using the Type reference
Enter the below comment in the top of the script file,
/// <reference types="Cypress" />
This is not an ideal way to use as the real time project will make more than a couple of .js file and it is a tedious process to add these comment on all of them.
Method 2: Configuring it as jsconfig
Instead of adding these commands from method 1 to all file we can just configure the config file for that it adds the Cypress IntelliSense in all the js file in the project directory.
Enter the below comment in the top of the script file,
{
"include": [
"./node_modules/cypress",
"cypress/**/*.js"
]
}
Edit or add them by the following below instruction,
1. Open the file jsconfig.json in the project directory if not create one in the root directory.
2. Add the above added comment in it.
After following either of this technique the IDE will now equipped with intelliSence of Cypress this can be tested my hover any its methods as shown in below
Method 3: Setting up it in Dev Environment
Intelligent code completion using JSON schemas is supported by default in Visual Studio Code and Visual Studio. All other editors will require extra configuration or plugins for JSON schema support.
To set up in Visual Studio Code you can open Preferences / Settings / User Settings and add the json.schemas property. Make sure to replace cypress.json with your configuration file if not the default.
{
"json.schemas": [
{
"fileMatch": [
"cypress.json"
],
"url": "https://on.cypress.io/cypress.schema.json"
}
]
}
Search for schema in the search settings and click edit in settings.json