最近更新了一下 ESLint 配置，发现 Cypress 测试代码中出现了很多红线，意识到 Cypress 配置也需要更新了。

旧配置

使用在 cypress 文件夹中配置 tsconfig.json 的方式，超简单。内容如下：

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

新配置

新配置分成 2 部分，ESLint 和 jsconfig.json。

• ESLint 负责检查 Cypress 断言的使用是否正确
• jsconfig 负责 Cypress 自动补全

ESLint

1. 安装 eslint-plugin-cypress

npm install eslint-plugin-cypress --save-dev

2. 配置 .eslintrc.json

// .eslintrc.json
{
  "plugins": ["cypress"],
  "env": {
    "cypress/globals": true
  }
}

jsconfig

在项目根目录下创建 .jsconfig.json，配置如下内容：

// .jsconfig.json
{
  "include": ["./node_modules/cypress", "cypress/**/*.js"]
}

refs:

• https://github.com/cypress-io/eslint-plugin-cypress