Repository files navigation

A comprehensive collection of ESLint rules optimized for React applications, bundling best practices for React, React Hooks, accessibility, imports, and more.

# Using npmnpm install --save-dev eslint-plugin-jsx-a11y eslint-plugin-import eslint-plugin-react eslint-react-rules# Using yarnyarn add --dev eslint-plugin-jsx-a11y eslint-plugin-import eslint-plugin-react eslint-react-rules# Using pnpmpnpm add -D eslint-plugin-jsx-a11y eslint-plugin-import eslint-plugin-react eslint-react-rules

If you are using ESLint 9 or later, you can easily extend the recommended configuration provided by this package.To use the recommended configuration, add the following to your ESLinteslint.config.js file:

importeslintReactRulesfrom'eslint-react-rules';importimportPluginfrom"eslint-plugin-import";importpluginReactfrom"eslint-plugin-react";importjsxA11yfrom'eslint-plugin-jsx-a11y';exportdefaulttseslint.config({extends:[// other configs...pluginReact.configs.flat.recommended,importPlugin.flatConfigs.recommended,eslintReactRules.recommended,],plugins:{// other plugins...'jsx-a11y':jsxA11y,},rules:{// other rules..."react/react-in-jsx-scope":"off"},  ...

If you are using ESLint 8 or earlier, you can add the recommended configuration to your.eslintrc.js or.eslintrc.json file:

module.exports={extends:[// other configs..."eslint-plugin-import/recommended","eslint-react-rules/recommended","plugin:react/recommended",],plugins:[// other plugins..."jsx-a11y",],// Your other ESLint configuration};

This package includes curated rule sets for:

• React - Core React best practices
• React Hooks - Rules for proper React Hooks usage
• Accessibility (a11y) - Ensuring your React applications are accessible
• Best Practices - General JavaScript best practices
• Variables - Variable declaration and usage rules
• Imports - Module import/export rules
• Errors - Common error prevention
• Style - Code style consistency
• Node - Node.js specific rules
• ES6 - Modern JavaScript rules

The package provides the following rule sets:

• best-practices.cjs - Common JavaScript best practices
• react-hooks.cjs - Rules for React Hooks
• react-a11y.cjs - Accessibility rules for React
• variables.cjs - Variable usage rules
• imports.cjs - Import/export rules
• errors.cjs - Error prevention rules
• style.cjs - Code style rules
• react.cjs - React-specific rules
• node.cjs - Node.js-specific rules
• es6.cjs - ES6+ JavaScript rules

You can also extend individual rule sets for more granular control:

module.exports={extends:[// Base rules"eslint-react-rules/rules/best-practices","eslint-react-rules/rules/react",// Add only the rule sets you need],rules:{// Your custom rule overrides},};