Question 73602 in Reactjs Question posted in
The new location for the React Documentation can be found here.

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

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

How can I use AirBnB Rules with the existing configuration?

Tags:

2

Answers


  1. 0

    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:

    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search