How to add typescript-eslint rules to eslint

Question

I'm using NX to build out Angular apps and I've configured it to use ESLint. We are able to configure built in rules like no-console but @typescript-eslint/no-inferrable-types is not accepting our overrides. We even tried moving the rule into variables entries of the overrides section, but nothing worked.

Where do we specify the typescript-eslint rules?

Our root level .eslintrc.json :

{
  "root": true,
  "ignorePatterns": ["**/*"],
  "plugins": ["@nrwl/nx"],
  "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"],
      "parserOptions": { "project": "./tsconfig.*?.json" },
      "rules": {}
    },
    {
      "files": ["*.js", "*.jsx"],
      "extends": ["plugin:@nrwl/nx/javascript"],
      "rules": {}
    }
  ],
  "rules": {
    "no-console":"warn",
    "@typescript-eslint/no-inferrable-types": "off"
  }
}

Answer 1

Based on my understanding of how NX linting works, I think you can add the rule to the overrides section.

In the JSON below you can see the no-console is added to the "rules" of the overrides array element that has file matches for *.ts and *.tsx.

{
  "root": true,
  "ignorePatterns": ["**/*"],
  "plugins": ["@nrwl/nx"],
  "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"],
      "parserOptions": { "project": "./tsconfig.*?.json" },
      "rules": {
        "no-console":"warn"
      }
    },
    {
      "files": ["*.js", "*.jsx"],
      "extends": ["plugin:@nrwl/nx/javascript"],
      "rules": {}
    }
  ],
  "rules": {
    "@typescript-eslint/no-inferrable-types": "off"
  }
}

It matters which overrides array element you put the rule in. I encountered a similar issue, and you can see a full explanation of different approaches I tried in the answer on https://stackoverflow.com/a/71230627/990642 .

It is worth noting that it seems people have mixed luck overriding rules already specified in a plugins or extends .

Answer 2

You are missing the plugin in your plugs reference array.So only "@nrwl/nx" rules, and other rules with no namespace will apply. Try this: "plugins": [ "@nrwl/nx", "@typescript-eslint"]. Oh, and you could as well add this inside the "overrides" section if you just want it to be applied only to some kind of file(eg .ts or.tsx files), or/and change the processing parser