Angular13项目中ng lint不检查Cypress文件夹文件的问题

问题背景 #

基于Angular 13 + TypeScript的项目，使用ESLint做代码检查。引入Cypress后，执行ng lint命令时不会扫描/cypress目录下的文件，但Visual Studio Code的ESLint插件能正常识别该目录内的代码错误。

当前.eslintrc.json配置及项目目录结构如下：

现有.eslintrc.json配置 #

{
    "root": true,
    "ignorePatterns": [
        "projects/**/*",
        "cypress/fixtures/**/*",
        "cypress/integration-original/**/*.js",
        "src/**/*.spec.ts",
        "src/**/*.mock.ts"
    ],
    "overrides": [
        {
            "files": [
                "*.ts"
            ],
            "parserOptions": {
                "project": [
                    "tsconfig.json",
                    "e2e/tsconfig.json"
                ],
                "createDefaultProgram": true
            },
            "extends": [
                "eslint:recommended",
                "plugin:@angular-eslint/recommended",
                "plugin:@typescript-eslint/eslint-recommended",
                "plugin:@typescript-eslint/recommended"
            ],
            "plugins": [
                "deprecation"
            ],
            "rules": { ... }
        },
        {
            "files": [
                "*.html"
            ],
            "extends": [
                "plugin:@angular-eslint/template/recommended"
            ],
            "rules": {}
        }
    ]
}

项目目录结构 #

-cypress
-node_modules
-src
.eslintrc.json
tsconfig.json
...

问题原因 #

1. ng lint依赖ESLint配置中parserOptions.project指定的tsconfig文件解析TypeScript文件，当前配置仅包含根目录tsconfig.json和e2e/tsconfig.json，而Cypress代码不在这两个配置的include范围内，导致ESLint无法为这些文件创建解析程序，最终跳过检查。
2. VS Code的ESLint插件会自动发现并读取项目中的其他tsconfig文件（比如cypress/tsconfig.json），因此能正常解析并检查Cypress目录下的代码。

解决方案 #

修改.eslintrc.json，添加针对Cypress文件的专属配置，并更新解析配置包含Cypress的tsconfig：

步骤1：添加Cypress文件的Overrides配置 #

在现有overrides数组中新增一个配置块，专门处理Cypress的TypeScript文件：

{
    "files": [
        "cypress/**/*.ts"
    ],
    "parserOptions": {
        "project": "cypress/tsconfig.json"
    },
    "extends": [
        "eslint:recommended",
        "plugin:@typescript-eslint/eslint-recommended",
        "plugin:@typescript-eslint/recommended",
        "plugin:cypress/recommended" // 可选：启用Cypress官方ESLint规则
    ],
    "plugins": [
        "cypress" // 可选：引入Cypress ESLint插件，需先安装依赖
    ],
    "rules": {
        // 可添加针对Cypress代码的自定义规则，示例：
        "@typescript-eslint/no-unused-vars": "warn"
    }
}

步骤2：安装Cypress ESLint插件（可选） #

如果要使用Cypress官方规则，先安装依赖：

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

步骤3：验证配置 #

修改完成后执行ng lint命令，现在应该会扫描并检查/cypress目录下的TypeScript文件了。

内容的提问来源于stack exchange，提问作者koral