Rules inside NX workspace's root `.eslintrc.json` file not extending to project's `.eslintrc.json` file

Question

I have some rules inside my root .eslintrc.json. This is the file.

{
  "root": true,
  "ignorePatterns": ["**/*"],
  "plugins": ["@nrwl/nx", "react", "@typescript-eslint", "prettier"],
  "extends": [
    "plugin:react/recommended",
    "google",
    "plugin:@typescript-eslint/recommended",
    "prettier"
  ],
  "rules": {
    "camelcase": "off",
    "prettier/prettier": 0,
    "no-unused-vars": "error",
    "@typescript-eslint/no-unused-vars": "error",
    "@typescript-eslint/no-explicit-any": "off",
    "@typescript-eslint/explicit-module-boundary-types": "off",
    "@typescript-eslint/no-empty-function": "off",
    "require-jsdoc": 0,
    "no-invalid-this": 0,
    "valid-jsdoc": 0,
    "indent": "off",
    "linebreak-style": "off",
    "object-curly-spacing": 0,
    "quotes": ["error", "single"],
    "semi": ["error", "always"],
    "operator-linebreak": [
      "error",
      "after",
      { "overrides": { "?": "before", ":": "before" } }
    ],
    // React
    "react/prop-types": 0,
    "react/react-in-jsx-scope": 0, // NEXT dynamic imports
    "comma-dangle": [
      "error",
      {
        "arrays": "only-multiline",
        "objects": "only-multiline",
        "imports": "only-multiline",
        "exports": "only-multiline",
        "functions": "only-multiline"
      }
    ],
    "max-len": [
      "error",
      {
        "code": 80,
        "ignoreTrailingComments": true,
        "ignoreRegExpLiterals": true,
        "ignoreUrls": true,
        "tabWidth": 2,
        "ignorePattern": ".*[as|import]"
      }
    ]
  },
  "overrides": [
    {
      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
      "rules": {
        "@nrwl/nx/enforce-module-boundaries": [
          "error",
          {
            "enforceBuildableLibDependency": true,
            "allow": [],
            "depConstraints": [
              {
                "sourceTag": "*",
                "onlyDependOnLibsWithTags": ["*"]
              }
            ]
          }
        ]
      }
    },
    {
      "files": ["*.ts", "*.tsx"],
      "extends": ["plugin:@nrwl/nx/typescript"],
      "rules": {}
    },
    {
      "files": ["*.js", "*.jsx"],
      "extends": ["plugin:@nrwl/nx/javascript"],
      "rules": {}
    }
  ]
}

I have a .eslintrc.json inside one of my projects, that extends rules from the root file. However, the rules are not being applied. This is what the file looks like.

{
  "extends": ["plugin:@nrwl/nx/react", "../../../.eslintrc.json"],
  "ignorePatterns": ["!**/*"],
  "overrides": [
    {
      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
      "rules": {}
    },
    {
      "files": ["*.ts", "*.tsx"],
      "rules": {}
    },
    {
      "files": ["*.js", "*.jsx"],
      "rules": {}
    }
  ],
  "rules": {
    "camelcase": "off",
    "prettier/prettier": 0,
    "no-unused-vars": "error",
    "@typescript-eslint/no-unused-vars": "error",
    "@typescript-eslint/no-explicit-any": "off",
    "@typescript-eslint/explicit-module-boundary-types": "off",
    "@typescript-eslint/no-empty-function": "off",
    "require-jsdoc": 0,
    "no-invalid-this": 0,
    "valid-jsdoc": 0,
    "indent": "off",
    "linebreak-style": "off",
    "object-curly-spacing": 0,
    "quotes": ["error", "single"],
    "semi": ["error", "always"],
    "operator-linebreak": [
      "error",
      "after",
      { "overrides": { "?": "before", ":": "before" } }
    ],
    // React
    "react/prop-types": 0,
    "react/react-in-jsx-scope": 0, // NEXT dynamic imports
    "comma-dangle": [
      "error",
      {
        "arrays": "only-multiline",
        "objects": "only-multiline",
        "imports": "only-multiline",
        "exports": "only-multiline",
        "functions": "only-multiline"
      }
    ],
    "max-len": [
      "error",
      {
        "code": 80,
        "ignoreTrailingComments": true,
        "ignoreRegExpLiterals": true,
        "ignoreUrls": true,
        "tabWidth": 2,
        "ignorePattern": ".*[as|import]"
      }
    ]
  }
}

Because of this, I'm being forced to manually copy over the rules from the root file to the file inside the project. This is not ideal, so I was hoping someone could point out what I could be doing wrong.

Answer 1

I've run into something similar and found some related posts:

• https://github.com/nrwl/nx/issues/5866
• Esslint configuration for Nx/Angular project (no-host-metadata-property)
• How do I override an eslint rule in my nx workspace?
• How to add typescript-eslint rules to eslint
• https://github.com/nrwl/nx/issues/7759

My scenario is I want to enable no-unreachable as an error level on all apps and libs in my nx workspace. I'm using NX version 13. I have a file in myapp (a NestJS app) that has a line of unreachable code.

Here is what I observe:

Scenario 1: Default eslint config

Using the default config, I get:

$ nx lint myapp
...
>  NX   SUCCESS  Running target "lint" succeeded

I don't even get a warning for unreachable code.

Scenario 2: Add rule to root eslint rules

Adding rules.no-unreachable in the root .eslintrc.json like so:

{
  "rules": {
    "no-unreachable": "error"
  }
...

Results in:

$ nx lint myapp
...
>  NX   SUCCESS  Running target "lint" succeeded

This is not what I expected. I expected a failure.

Scenario 3: Add rule to root eslint overrides

Adding rules.overrides in the root .eslintrc.json like so:

{
  "overrides": [
    {
      "files": ["*.ts", "*.tsx"],
      "extends": ["plugin:@nrwl/nx/typescript"],
      "rules": {
        "no-unreachable": "error"
      }
    },
...

Note: there are several elements in the overrides array, the "rules" key is added to the one where files match *.ts files and it extends @nrwl/nx/typescript. It matters which overrides array element is chosen.

Results in:

$ nx lint myapp
...
/Users/myuser/src/myrepo/apps/myapp/src/app/mymodule/mymodule.service.ts
  82:9  error  Unreachable code  no-unreachable
>  NX   ERROR  Running target "myapp:lint" failed

Yay! I expected a failure and got one.

Scenario 4: Add rule to myapp's eslint rules

Adding rules.no-unreachable to myapp's .eslintrc.json like so:

{
  "rules": {
    "no-unreachable": "error"
  }
...

Results in:

$ nx lint myapp
...
/Users/myuser/src/myrepo/apps/myapp/src/app/mymodule/mymodule.service.ts
  82:9  error  Unreachable code  no-unreachable
>  NX   ERROR  Running target "myapp:lint" failed

Yay! I expected a failure and got one.

Scenario 5: Add rule to myapp's eslint overrides

Adding rules.overrides in myapp's .eslintrc.json like so:

{
  "overrides": [
    {
      "files": ["*.ts", "*.tsx"],
      "rules": {
        "no-unreachable": "error"
      }
    },
...

Note: as mentioned before, it matters which overrides array element you add it to.

Results in:

$ nx lint myapp
...
/Users/myuser/src/myrepo/apps/myapp/src/app/mymodule/mymodule.service.ts
  82:9  error  Unreachable code  no-unreachable
...
>  NX   ERROR  Running target "myapp:lint" failed

Yay! I expected a failure and got one.

Recommendations

I've looked at the tsconfig in the question and it's not clear to me what rules are not applying. If you can answer that I might have a more specific recommendation.

Meanwhile, based on these scenarios I've done above, I think you have two general options:

Option 1: Put the rules in the "overrides" section of the root .eslintrc.json. This would cause that rule to apply to all files that match the relevant file pattern (e.g. *.ts, *.tsx).

Option 2: Put the rules in the "rules" section of the app's (or lib) .eslintrc.json. This would cause that rule to apply to everything in that app (or lib). You could also put it in the "overrides" section for more granular control.

I presume "extends" would follow a similar pattern to "rules" here, meaning you can either put the extends in the overrides section in root (Option 1) or put the extends in the app's "extends" section.

The eslint docs explain more about overrides here: https://eslint.org/docs/user-guide/configuring/configuration-files#how-do-overrides-work.