@peculiar/eslint-config-react

A React-specific ESLint configuration for modern JavaScript and TypeScript projects. This package integrates recommended configurations for React, TypeScript, JSX accessibility, stylistic rules, and import handling to ensure a consistent and high-quality codebase.

Quick Start

[!IMPORTANT]
If you are using pnpm, be sure to create a .npmrc file with at least the following settings:

auto-install-peers=true
node-linker=hoisted

This ensures that pnpm installs dependencies in a way that is more compatible with npm and is less likely to produce errors.

1. Setup Base Config

Make sure you have the base ESLint configuration set up. Install @peculiar/eslint-config-base by following the installation instructions here.

2. Install React Config

Once the base config is installed, add the @peculiar/eslint-config-react package:

npm install -D @peculiar/eslint-config-react

3. Configure ESLint

To use @peculiar/eslint-config-react in your project, configure your ESLint to extend this configuration.

1. Create or update your ESLint configuration file (e.g., eslint.config.mjs).
2. Extend @peculiar/eslint-config-react as shown below:

Example: eslint.config.mjs

import tseslint from 'typescript-eslint';
import baseConfig from '@peculiar/eslint-config-base';
import reactConfig from '@peculiar/eslint-config-react';

export default tseslint.config([
  ...baseConfig,
  ...reactConfig,
]);

Step 4: Run the Linter

After setting up, you can run ESLint using the following command:

npx eslint

Features

This configuration includes:

• React Rules: Recommended settings for React and React Hooks using eslint-plugin-react and eslint-plugin-react-hooks.
• JSX Accessibility: Ensures accessibility best practices with eslint-plugin-jsx-a11y.
• Custom Rules: Tailored rules for statement padding, JSX formatting, object formatting, and more.

Customizations

Feel free to override or extend the rules in your project-specific ESLint configuration as needed. For example:

Adding a Custom Rule

To add a custom ESLint rule, include it in your configuration as follows:

import tseslint from 'typescript-eslint';
import baseConfig from '@peculiar/eslint-config-base';
import reactConfig from '@peculiar/eslint-config-react';

export default tseslint.config([
  ...baseConfig,
  ...reactConfig,
  {
    rules: {
      'your-custom-rule': 'warn',
    },
  },
]);

License

This project is licensed under the MIT License.