How do I override an eslint rule in my nx workspace?

Viewed 2811

How do I overrride the eslint rules in plugin:@nrwl/nx/typescript? I've made this change to the root of .eslintrc.json.

"rules": {
  "@typescript-eslint/member-ordering": "warn"
},

and still get an error after introducing a demonstration violation of the rule

D:\me\sample\apps\my-app\src\app\app.component.ts
  16:3  error  Member outOfOrder should be declared before all instance method definitions  @typescript-eslint/member-ordering

āœ– 1 problem (1 error, 0 warnings)

Lint errors found in the listed files.

I tried adding the rule change to the overrides section for typescript too.

2 Answers

There is no way to set this on the root level as your project's .eslintrc.json will always override those changes due to @nrwl/nx/typescript being set in the overrides section.

You will unfortunately have to set this is every project in the overrides section.

If you have multiple projects and/or multiple changes that need to be applied, you can extract it into eslint-custom-overrides file and use it as the last in the extends section:

{
  "extends": ["../../.eslintrc.json"],
  "ignorePatterns": ["!**/*"],
  "overrides": [
    {
      "files": ["*.ts"],
      "extends": [
        "plugin:@nrwl/nx/typescript",
        "../../eslintrc-custom-overrides.json"
      ],
   },
   ...
  ],
  ...
}

Your eslintrc-custom-overrides.json would look like this:

{
  "overrides": [
    {
      "files": ["*.ts"],
      "rules": {
         "@typescript-eslint/member-ordering": "warn"
      }
    }
  ]
}

Check for more details on the NX Issue.

I have found a solution that works great for me that avoids any copy pasting (that I found unacceptable) and more or less goes against the "not possible" assertion in the accepted answer. The key for me was not using the file based overrides and do extends instead. It works great and does exactly what I want it to do (and not seeing any downsides). Hope it helps:

A NextJS / React UI project enter image description here

A config for a NodeJS GraphQL project

enter image description here

A config for all NextJS / UI Projects

enter image description here

A config for everything that can be overridden by anything above

enter image description here

Related