ESLintConfig React

Shareable ESLint React configuration settings linked with Prettier. ESLint formatting rules are disabled, then re-enabled through the eslint-prettier plugin. This way the formatting rules still get applied and Prettier formatting won't conflict with ESLint linting.

No errors, only warnings.

Prerequisites

• NodeJS and NPM installed
• Project set up with NodeJS and a package.json
• Official ESLint and Prettier extensions installed
• Navigate to the root directory of your project

Installation and Usage

1. Install ESLint and Prettier core packages

npm i eslint prettier -D

2. Install ESLint plugins

npm i @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-plugin-react eslint-plugin-prettier -D

3. Install @wildpastry custom ESLint config

npm i @wildpastry/eslint-config -D

4. Create .prettierrc file

Create a .prettierrc file in your project root:

{
  "arrowParens": "always",
  "bracketSameLine": true,
  "bracketSpacing": true,
  "embeddedLanguageFormatting": "auto",
  "endOfLine": "auto",
  "htmlWhitespaceSensitivity": "strict",
  "insertPragma": false,
  "jsxSingleQuote": true,
  "printWidth": 80,
  "proseWrap": "preserve",
  "quoteProps": "consistent",
  "requirePragma": false,
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "none",
  "useTabs": false
}

5. Add config to eslint.config.js

Create an eslint.config.js file in your project root:

import { defineConfig, globalIgnores } from 'eslint/config';
import wildpastryConfig from '@wildpastry/eslint-config';

export default defineConfig([globalIgnores(['dist']), ...wildpastryConfig]);

For TypeScript projects with type-aware rules:

If you want to use TypeScript type-aware rules, add parser configuration:

import { defineConfig, globalIgnores } from 'eslint/config';
import wildpastryConfig from '@wildpastry/eslint-config';

export default defineConfig([
  globalIgnores(['dist']),
  ...wildpastryConfig,
  {
    languageOptions: {
      parserOptions: {
        project: ['./tsconfig.node.json', './tsconfig.app.json']
      }
    }
  }
]);

6. Add optional scripts to package.json

Add these scripts inside "scripts": { ... } in your package.json:

{
  "scripts": {
    "lint": "eslint \"**/*.{js,jsx,ts,tsx}\"",
    "lint:fix": "eslint --fix \"**/*.{js,jsx,ts,tsx}\"",
    "format": "npx prettier --check \"**/*.{js,jsx,ts,tsx}\"",
    "format:fix": "npx prettier --write \"**/*.{js,jsx,ts,tsx}\"",
    "clean": "npx prettier --write \"**/*.{js,jsx,ts,tsx}\" && npm run lint:fix"
  }
}

Usage Commands

Check linting issues:

npm run lint

Fix linting issues automatically (may not fix all):

npm run lint:fix

Check formatting issues:

npm run format

Fix formatting issues automatically (may not fix all):

npm run format:fix

Clean and fix both formatting and linting (may not fix all):

npm run clean

Features

• Modern ESLint flat config format
• TypeScript support with modern rules
• React 17+ support (no React import required)
• Prettier integration for consistent formatting
• Warnings only (no errors) for better development experience
• Optimized for modern JavaScript/TypeScript practices