The @nx/eslint-plugin package is an ESLint plugin that contains a collection of recommended ESLint rule configurations which you can extend from in your own ESLint configs, as well as the following Nx-specific ESLint rules:

Setting Up ESLint Plugin

Installation

Keep Nx Package Versions In Sync

Make sure to install the @nx/eslint-plugin version that matches the version of nx in your repository. If the version numbers get out of sync, you can encounter some difficult to debug errors. You can fix Nx version mismatches with this recipe.

In any Nx workspace, you can install @nx/eslint-plugin by running the following commands if the package is not already installed:

nx add @nx/eslint-plugin

This will install the correct version of @nx/eslint-plugin.

Included plugins

The plugin contains the following rule configurations divided into sub-plugins.

JavaScript

The @nx/javascript ESLint plugin contains best practices when using JavaScript.

TypeScript

The @nx/typescript ESLint plugin contains best practices when using TypeScript.

Angular

Contains configurations matching best practices when using Angular framework:

  • @nx/angular
  • @nx/angular-template

React

Contains configurations matching best practices when using React framework:

  • @nx/react-base
  • @nx/react-jsx
  • @nx/react-typescript

You can also use @nx/react which includes all three @nx/react-* plugins

Enforce Module Boundaries rule

The enforce-module-boundaries ESLint rule enables you to define strict rules for accessing resources between different projects in the repository. Enforcing strict boundaries helps prevent unplanned cross-dependencies. Read more about it on a dedicated page.

Dependency Checks rule

The @nx/dependency-checks ESLint rule enables you to discover mismatches between dependencies specified in a project's package.json and the dependencies that your project actually depends on. Read more about it on a dedicated page.