How to configure Eslint AirBnB rules in an NX workspace Application?

Question

I am using NX Monorepo which comes with EsLint configured but without AirBnB Rules.

How can I use AirBnB Rules with the existing configuration?

Answer 1

I ended up with config below, however I faced error related to vitest. It seems that airbnb's eslint-plugin-import configuration doesn't work well with monorepos. see linter error here So I just disabled this rule, because nx handles dependencies itself.

// .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": [
        "airbnb-base",
        "airbnb-typescript/base",
        "plugin:@nrwl/nx/typescript",
        "plugin:prettier/recommended"
      ],
      "rules": {
        "import/no-extraneous-dependencies": "off"
      }
    },
    {
      "files": [
        "*.js",
        "*.jsx"
      ],
      "extends": [
        "airbnb-base",
        "plugin:@nrwl/nx/javascript",
        "plugin:prettier/recommended"
      ],
      "rules": {}
    }
  ]
}

//.eslint.react.json
{
  "overrides": [
    {
      "files": ["*.ts", "*.tsx"],
      "extends": [
        "airbnb",
        "airbnb-typescript",
        "plugin:@nrwl/nx/react-typescript",
        "plugin:prettier/recommended"
      ],
      "rules": {
        "react/react-in-jsx-scope": "off",
        "import/no-extraneous-dependencies": "off"
      }
    }
  ]
}

// libs/mylib1/.eslintrc.json
{
  "extends": [
    "../../.eslintrc.json"
  ],
  "ignorePatterns": [
    "!**/*"
  ],
  "parserOptions": {
    "project": [
      "libs/mylib1/tsconfig.*?.json"
    ]
  },
  "overrides": [
    {
      "files": [
        "*.ts",
        "*.tsx",
        "*.js",
        "*.jsx"
      ],
      "rules": {}
    },
    {
      "files": [
        "*.ts",
        "*.tsx"
      ],
      "rules": {}
    },
    {
      "files": [
        "*.js",
        "*.jsx"
      ],
      "rules": {}
    }
  ]
}

//libs/react-lib-1/.eslintrc.json
{
  "extends": ["plugin:@nrwl/nx/react", "../../.eslintrc.json", "../../.eslint.react.json"],
  "ignorePatterns": ["!**/*"],
  "parserOptions": {
    "project": ["libs/react-lib-1/tsconfig.*?.json"]
  },
  "overrides": [
    {
      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
      "rules": {}
    },
    {
      "files": ["*.ts", "*.tsx"],
      "rules": {}
    },
    {
      "files": ["*.js", "*.jsx"],
      "rules": {}
    }
  ]
}

Also I found two similar issues you can checkout:

• https://github.com/nrwl/nx/issues/3342
• https://github.com/nrwl/nx/issues/4840

Answer 2

This is my current override for TS

{
  "files": ["*.ts", "*.tsx"],
  "extends": [
    "plugin:@nrwl/nx/typescript",
    "airbnb",
    "airbnb-typescript",
    "plugin:prettier/recommended",
    "plugin:react/jsx-runtime"
  ],
  "parserOptions": {
    "project": "./tsconfig.base.json"
  },
  "rules": {}
}

Most of the peerDependencies needed by these extend configs are already installed so double check before installing, in my case for React Integrated Repo I only installed:

"eslint-config-airbnb": "^19.0.4",
"eslint-config-airbnb-typescript": "^17.0.0",
"eslint-plugin-prettier": "^4.2.1"

I use eslint-plugin-prettier since its recommended to leave the formatting part to Prettier, so that's optional. From there decide what to do with the clashing rules between NX conventions and the suggested by airbnb.