Rules are only applied from the last override?

Question

I have multiple overrides that target different file subsets, but some overlap. But eslint only seems to use the last matched override, thereby ignoring some of my rules.

I have the following config:

{
  "root": true,
  "overrides": [
    ...
    {
      "files": [
        "**/app/**/*.ts"
      ],
      "rules": {
        "no-restricted-imports": ["error", {
          "patterns": [{
            "group": ["*/platform-browser"],
            "message": "Bar"
          }]
        }]
      }
    },
    {
      "files": [
        "**/src/**/*.ts"
      ],
      "rules": {
        "no-restricted-imports": ["error", {
          "patterns": [{
            "group": ["*/core"],
            "message": "Foo"
          }]
        }]
      }
    },
    ...
  ]
}

Then I have the file src\app\app.module.ts:

import { NgModule } from '@angular/core'; //<-- Should trigger Foo
import { BrowserModule } from '@angular/platform-browser'; //<-- Should trigger Bar

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

But it only triggers one of the rules (the one that's last in the override array)

Is there someway to apply both?

I have a sample repository here if that helps

Answer 1

If your app and source are one directory deep you could try */src/**/*.ts to make a clear distinction between the two.

You should also change the order because every src has an app, not every app has a source so you want src to be first and app to be last to override src.

I hope that fixes the issue. I don't know the exact ins and outs so I can't help you further.

Answer 2

According to the ESLint documentation, rules are applied from the last override in the array:

"If multiple rules are matched by different overrides, the last matching rule in the array will be used."

https://eslint.org/docs/user-guide/configuring#configuration-cascading-and-hierarchy

Therefore, in your example, only the "no-restricted-imports" rule from the last override will be applied.

To fix this, you can move the "no-restricted-imports" rule from the second override to the first override, so that it will be applied last:

{
  "root": true,
  "overrides": [
    ...
    {
      "files": [
        "**/app/**/*.ts"
      ],
      "rules": {
        "no-restricted-imports": ["error", {
          "patterns": [{
            "group": ["*/platform-browser"],
            "message": "Bar"
          }]
        }]
      }
    },
    {
      "files": [
        "**/src/**/*.ts"
      ],
      "rules": {
      }
    },
    ...
  ]
}

Or, you can move the "no-restricted-imports" rule from the second override to a new override that targets both "/app//.ts" and "/src//.ts":

{
  "root": true,
  "overrides": [
    ...
    {
      "files": [
        "**/app/**/*.ts",
        "**/src/**/*.ts"
      ],
      "rules": {
        "no-restricted-imports": ["error", {
          "patterns": [{
            "group": ["*/platform-browser"],
            "message": "Bar"
          }, {
            "group": ["*/core"],
            "message": "Foo"
          }]
        }]
      }
    },
    ...
  ]
}