eslint-plugin-react-edge

ESLint plugin with niche rules for React projects

Why "react-edge"?

The name react-edge reflects that these rules are niche or uncommon—ones not typically found in existing React ESLint plugins. They were created to fill gaps encountered in real-world projects.

Rules Overview

• var-naming: Enforces naming conventions for variables and functions, with intelligent handling of React component naming. Solves the typescript-eslint#2607 problem where @typescript-eslint/naming-convention cannot distinguish React components from regular functions, leading to overly permissive rules.

• prefer-named-property-access: Enforces importing React members separately instead of accessing them through the React namespace, and prevents importing React event types that conflict with global DOM event types.

See the complete Rules Documentation for detailed explanation and examples of each rule.

Installation

# npm
npm install eslint-plugin-react-edge --save-dev

# yarn
yarn add -D eslint-plugin-react-edge

# pnpm
pnpm add -D eslint-plugin-react-edge

Usage

ESLint Flat Config (eslint.config.js)

import eslintReactEdge from 'eslint-plugin-react-edge';

export default [
  // configuration included in plugin
  ...reactEdge.configs.recommended,
  // other configuration objects...
  {
    plugins: {
      'react-edge': eslintReactEdge,
    },
    rules: {
      'react-edge/var-naming': ['error', {
        funcFormat: ['camelCase'],
        varFormat: ['camelCase', 'UPPER_CASE'],
        excludeNames: [],
        excludeFuncs: [],
        excludeTypes: [],
      }],
      'react-edge/prefer-named-property-access': 'error',
    },
  },
];

Requirements

• ESLint ^9.6.0
• Node.js ^18.18.0

License

MIT License © 2021-PRESENT kokororin