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

Question

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.

Nanna

see related issue github.com/nrwl/nx/issues/5866 – Nanna

See answer to related question: https://mcmap.net/q/1921802/-esslint-configuration-for-nx-angular-project-no-host-metadata-property – Padilla

I encountered a similar issue. I took a different approach than the accepted answer here. See answer: https://mcmap.net/q/1921803/-rules-inside-nx-workspace-39-s-root-eslintrc-json-file-not-extending-to-project-39-s-eslintrc-json-file. – Golden

Answer 1

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.

Nosy

This is simply not the case and leads to a bunch of copy paste. Just use extends as I have in my answer and it works great! – Bo

Thank you! It helps me a lot. btw @JohnCulviner your answer is good, but it doesn't work for me, I have the same structure as yours, but in my case, overrides work buggy, and only an additional file solves this issue. – Ulcerative

Answer 2

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

A config for a NodeJS GraphQL project

A config for all NextJS / UI Projects

A config for everything that can be overridden by anything above

Bo

I can confirm, this works and should be the accepted answer. One thing to note, please make sure to reload VSCode (or whatever IDE you're using) so ESLint reflects your changes. – Evidently

John, out of interest. Is there are reason you've removed NX's default overrides in your base .eslintrc.json file? – Evidently

Answer 3

This is working now at global level, so in the root .eslintrc.json file, you can add the exception.

For instance, I want all the rules except the "no-explicit-any" for spec files. This config works:

"overrides": [
   {...},
   {
     "files": ["*.spec.ts", "*.spec.tsx", "*.spec.js", "*.spec.jsx"],
     "env": {
       "jest": true
     },
     "rules": {
       "@typescript-eslint/no-explicit-any": "off"
     }
   }
 ]

Mcalpin