tessl/npm-nx--eslint-plugin

ESLint plugin for Nx monorepos with boundary enforcement and dependency management rules.

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview

Eval results

Files

ESLint Configurations

Name: tessl/npm-nx--eslint-plugin
Author: tessl

The @nx/eslint-plugin provides comprehensive pre-configured ESLint setups for different frameworks and project types, supporting both legacy ESLintRC format and modern flat config format.

Capabilities

Configuration Access

All configurations are available through the plugin's configs object, with different access patterns for different formats.

interface PluginConfigs {
  // Legacy ESLintRC configurations
  typescript: ESLintRCConfig;
  javascript: ESLintRCConfig;
  react: ESLintRCConfig;
  "react-base": ESLintRCConfig;
  "react-typescript": ESLintRCConfig;
  "react-jsx": ESLintRCConfig;
  angular: ESLintRCConfig;
  "angular-template": ESLintRCConfig;
  
  // Flat configurations (ESLint 9+)
  "flat/base": FlatConfig[];
  "flat/typescript": FlatConfig[];
  "flat/javascript": FlatConfig[];
  "flat/react": FlatConfig[];
  "flat/react-base": FlatConfig[];
  "flat/react-typescript": FlatConfig[];
  "flat/react-jsx": FlatConfig[];
  "flat/angular": FlatConfig[];
  "flat/angular-template": FlatConfig[];
}

ESLintRC Configuration Format

Legacy configuration format for ESLint versions prior to 9.0.

interface ESLintRCConfig {
  parser?: string;
  parserOptions?: {
    ecmaVersion?: number;
    sourceType?: "module" | "script";
    tsconfigRootDir?: string;
    ecmaFeatures?: {
      jsx?: boolean;
      globalReturn?: boolean;
    };
  };
  plugins?: string[];
  extends?: string[];
  rules?: Record<string, RuleConfigValue>;
  env?: Record<string, boolean>;
  globals?: Record<string, boolean>;
  settings?: Record<string, any>;
}

type RuleConfigValue = "off" | "warn" | "error" | 0 | 1 | 2 | [RuleLevel, ...any[]];
type RuleLevel = "off" | "warn" | "error" | 0 | 1 | 2;

Flat Configuration Format

Modern configuration format for ESLint 9.0 and later.

interface FlatConfig {
  name?: string;
  files?: string[];
  ignores?: string[];
  plugins?: Record<string, Plugin>;
  languageOptions?: {
    parser?: Parser;
    parserOptions?: Record<string, any>;
    ecmaVersion?: number;
    sourceType?: "module" | "script";
    globals?: Record<string, boolean>;
  };
  rules?: Record<string, RuleConfigValue>;
  settings?: Record<string, any>;
  processor?: Processor;
}

type FlatConfig = FlatConfig[];

Framework-Specific Configurations

TypeScript Configurations

Comprehensive TypeScript setup with recommended rules and Prettier integration when available.

// ESLintRC format
const typescriptConfig: ESLintRCConfig = {
  parser: "@typescript-eslint/parser",
  parserOptions: {
    ecmaVersion: 2020,
    sourceType: "module",
    tsconfigRootDir: string; // Set to workspace root
  },
  plugins: ["@typescript-eslint"],
  extends: [
    "eslint:recommended",
    "plugin:@typescript-eslint/eslint-recommended", 
    "plugin:@typescript-eslint/recommended",
    "prettier" // If available
  ],
  rules: {
    // Custom TypeScript rules
    "@typescript-eslint/explicit-member-accessibility": "off",
    "@typescript-eslint/explicit-module-boundary-types": "off",
    "@typescript-eslint/no-non-null-assertion": "warn",
    "@typescript-eslint/no-unused-vars": "warn",
    // ... additional rules
  };
};

// Flat config format  
const typescriptFlatConfig: FlatConfig[] = [
  {
    files: ["**/*.ts", "**/*.tsx", "**/*.cts", "**/*.mts"],
    extends: [eslint.configs.recommended, ...tseslint.configs.recommended],
    languageOptions: {
      parser: tseslint.parser,
      ecmaVersion: 2020,
      sourceType: "module",
      parserOptions: {
        tsconfigRootDir: string; // Workspace root
      }
    },
    rules: {
      // Same rule configuration as ESLintRC
    }
  }
];

Usage Examples:

// ESLintRC (.eslintrc.js)
module.exports = {
  extends: ["plugin:@nx/typescript"]
};

// Flat config (eslint.config.js)
import nxPlugin from "@nx/eslint-plugin";

export default [
  ...nxPlugin.configs["flat/typescript"]
];

JavaScript Configurations

Standard JavaScript configuration with ES2020 support and common best practices.

// ESLintRC format
const javascriptConfig: ESLintRCConfig = {
  parserOptions: {
    ecmaVersion: 2020,
    sourceType: "module"
  },
  extends: [
    "eslint:recommended",
    "prettier" // If available
  ],
  env: {
    browser: true,
    es6: true,
    node: true
  },
  rules: {
    // JavaScript-specific rules
  }
};

// Flat config format
const javascriptFlatConfig: FlatConfig[] = [
  {
    files: ["**/*.js", "**/*.jsx", "**/*.cjs", "**/*.mjs"],
    extends: [eslint.configs.recommended],
    languageOptions: {
      ecmaVersion: 2020,
      sourceType: "module",
      globals: {
        ...globals.browser,
        ...globals.node,
        ...globals.es2020
      }
    }
  }
];

React Configurations

Multiple React configurations for different use cases and setups.

// React Base Configuration  
const reactBaseConfig: ESLintRCConfig = {
  plugins: ["react", "react-hooks"],
  extends: [
    "plugin:react/recommended",
    "plugin:react-hooks/recommended"
  ],
  parserOptions: {
    ecmaFeatures: {
      jsx: true
    }
  },
  settings: {
    react: {
      version: "detect"
    }
  },
  rules: {
    "react/prop-types": "off", // Assuming TypeScript usage
    "react/react-in-jsx-scope": "off" // React 17+ JSX transform
  }
};

// React TypeScript Configuration
const reactTypescriptConfig: ESLintRCConfig = {
  extends: [
    "plugin:@nx/typescript",
    "plugin:@nx/react-base"
  ]
};

// React JSX Configuration (JavaScript React)
const reactJsxConfig: ESLintRCConfig = {
  extends: [
    "plugin:@nx/javascript", 
    "plugin:@nx/react-base"
  ]
};

Usage Examples:

// TypeScript React project
module.exports = {
  extends: ["plugin:@nx/react-typescript"]
};

// JavaScript React project  
module.exports = {
  extends: ["plugin:@nx/react-jsx"]
};

// Flat config React
import nxPlugin from "@nx/eslint-plugin";

export default [
  ...nxPlugin.configs["flat/react-typescript"]
];

Angular Configurations

Angular-specific configurations for code and template files.

// Angular Code Configuration
const angularConfig: ESLintRCConfig = {
  extends: [
    "plugin:@nx/typescript",
    "plugin:@angular-eslint/recommended"
  ],
  rules: {
    "@angular-eslint/directive-selector": [
      "error",
      { type: "attribute", prefix: "app", style: "camelCase" }
    ],
    "@angular-eslint/component-selector": [
      "error", 
      { type: "element", prefix: "app", style: "kebab-case" }
    ]
  }
};

// Angular Template Configuration
const angularTemplateConfig: ESLintRCConfig = {
  parser: "@angular-eslint/template-parser",
  extends: ["plugin:@angular-eslint/template/recommended"],
  rules: {
    "@angular-eslint/template/banana-in-box": "error",
    "@angular-eslint/template/no-negated-async": "error"
  }
};

Usage Examples:

// Angular project (.eslintrc.js)
module.exports = {
  overrides: [
    {
      files: ["*.ts"],
      extends: ["plugin:@nx/angular"]
    },
    {
      files: ["*.html"],
      extends: ["plugin:@nx/angular-template"]  
    }
  ]
};

// Flat config Angular
import nxPlugin from "@nx/eslint-plugin";

export default [
  {
    files: ["**/*.ts"],
    ...nxPlugin.configs["flat/angular"]
  },
  {
    files: ["**/*.html"],
    ...nxPlugin.configs["flat/angular-template"]
  }
];

Specialized Configurations

Base Flat Configuration

Minimal base configuration for flat config setups.

const baseFlatConfig: FlatConfig[] = [
  {
    plugins: {
      "@nx": nxPlugin
    },
    ignores: [".nx"]
  }
];

Prettier Integration

All configurations automatically detect and integrate with Prettier when available.

// Detection logic
const isPrettierAvailable = 
  packageExists('prettier') && 
  packageExists('eslint-config-prettier');

// Integration in ESLintRC
const configWithPrettier = {
  extends: [
    // ... other extends
    ...(isPrettierAvailable ? ['prettier'] : [])
  ]
};

// Integration in flat config  
const flatConfigWithPrettier = [
  // ... other configs
  ...(isPrettierAvailable ? [require('eslint-config-prettier')] : [])
];

Configuration Overrides

All configurations can be extended and customized:

// Extending TypeScript config
module.exports = {
  extends: ["plugin:@nx/typescript"],
  rules: {
    // Override or add rules
    "@typescript-eslint/no-explicit-any": "error",
    "@nx/enforce-module-boundaries": ["error", {
      // Custom boundary rules
    }]
  }
};

// Flat config extension
import nxPlugin from "@nx/eslint-plugin";

export default [
  ...nxPlugin.configs["flat/typescript"],
  {
    rules: {
      // Custom overrides
      "@typescript-eslint/no-explicit-any": "error"
    }
  }
];

Install with Tessl CLI