@bonesofspring/eslint-react

ESLint flat config for React + TypeScript projects.

Note: This package is primarily intended for personal use by Revy Ross. It is published for convenience but may not suit all projects.

Table of Contents

• Features
• Requirements
• Installation
• Quick Start
• Configuration
• Editor Setup
• TypeScript
• Config Exports
• Plugins and Rules
• License

Features

• Import order — Sorted imports with import-x/order (fixable)
• Unused imports — Auto-removal with unused-imports/no-unused-imports (fixable)
• React & TypeScript — Airbnb-style rules, React Hooks, JSX a11y
• Code quality — SonarJS, Unicorn, consistent type imports
• Formatting — Prettier integration, @stylistic rules
• Optional — Next.js, Jest, Testing Library, Markdown, Security, Promise, RegExp, JSDoc

Requirements

• ESLint ^10.0.0
• Node.js >= 20.0.0

Installation

# yarn
yarn add -D @bonesofspring/eslint-react eslint prettier

# npm
npm install -D @bonesofspring/eslint-react eslint prettier

# pnpm
pnpm add -D @bonesofspring/eslint-react eslint prettier

For TypeScript projects with import resolution:

yarn add -D eslint-import-resolver-typescript

Quick Start

// eslint.config.js
import config from '@bonesofspring/eslint-react'

export default config

Configuration

Full config (all plugins)

// eslint.config.js
import config from '@bonesofspring/eslint-react'

export default config

Modular configs

Import only the configs you need:

// eslint.config.js
import base from '@bonesofspring/eslint-react/base'
import typescript from '@bonesofspring/eslint-react/typescript'
import react from '@bonesofspring/eslint-react/react'
import imports from '@bonesofspring/eslint-react/imports'
import stylistic from '@bonesofspring/eslint-react/stylistic'
import prettier from '@bonesofspring/eslint-react/prettier'

export default [
  ...base,
  ...typescript,
  ...react,
  ...imports,
  ...stylistic,
  ...prettier,
]

Next.js project

// eslint.config.js
import config from '@bonesofspring/eslint-react'

export default config

The full config already includes @next/eslint-plugin-next.

With Jest (test files only)

// eslint.config.js
import config from '@bonesofspring/eslint-react'
import jestPlugin from 'eslint-plugin-jest'

export default [
  ...config,
  {
    files: ['**/*.test.{ts,tsx}', '**/*.spec.{ts,tsx}'],
    ...jestPlugin.configs['flat/recommended'],
    rules: {
      'jest/no-mocks-import': 'off',
    },
  },
]

Editor Setup

Fix on save

VS Code / Cursor — add to settings.json:

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  }
}

WebStorm — Settings → Languages & Frameworks → JavaScript → Code Quality Tools → ESLint → enable Run eslint --fix on save.

TypeScript

• Requires tsconfig.json (uses projectService: true).
• For import-x resolver with TypeScript paths, install eslint-import-resolver-typescript (optional peer dependency).

Config Exports

| Export | Description | |--------|-------------| | . | Full config (all plugins) | | ./base | Base ESLint + Airbnb rules | | ./typescript | TypeScript ESLint (recommended + strict) | | ./react | React, React Hooks, JSX a11y, You Might Not Need an Effect | | ./imports | import-x (order, no-cycle, etc.) | | ./stylistic | @stylistic (semi, quotes, etc.) | | ./unicorn | Unicorn (rules disabled by default) | | ./sonarjs | SonarJS (recommended) | | ./jest | Jest (plugin + globals) | | ./next | Next.js | | ./prettier | Prettier + unused-imports | | ./markdown | Markdown (lint .md files) | | ./testing-library | Testing Library | | ./security | Security | | ./promise | Promise | | ./regexp | RegExp | | ./jsdoc | JSDoc |

Plugins and Rules

Core

@eslint/js (base)

• Config: eslint.configs.recommended
• Custom rules: Airbnb-style base (best practices, errors, ES6, style, variables), plus:
  • arrow-body-style, no-duplicate-imports, max-lines (300), no-param-reassign, no-console, no-debugger, no-unused-vars (off)

typescript-eslint

• Config: recommended + strict
• Custom rules: consistent-type-imports, naming-convention (I/T/E prefixes), no-require-imports, etc.

eslint-plugin-react

• Rules: Airbnb-style React rules + overrides
• Key: jsx-curly-brace-presence, jsx-filename-extension (.tsx), jsx-sort-props, function-component-definition (arrow-function)

eslint-plugin-react-hooks

• Rules: rules-of-hooks (error), exhaustive-deps (warn)

eslint-plugin-react-you-might-not-need-an-effect

• Config: recommended (detects unnecessary useEffect)

eslint-plugin-jsx-a11y

• Rules: Airbnb-style accessibility rules

eslint-plugin-import-x

• Rules: first, no-cycle, newline-after-import, order (groups, newlines-between), no-extraneous-dependencies

@stylistic/eslint-plugin

• Rules: no-multiple-empty-lines, semi (never), padding-line-between-statements, quotes (single)

eslint-plugin-prettier

• Rules: prettier/prettier (singleQuote, no semi, trailingComma: all, printWidth: 100)

eslint-plugin-unused-imports

• Rules: no-unused-imports (error), no-unused-vars (warn, replaces @typescript-eslint/no-unused-vars)

Code quality

eslint-plugin-unicorn

• Config: Plugin included; extend unicorn.configs.recommended for full ruleset
• Disabled: consistent-destructuring, filename-case, no-null, prevent-abbreviations, etc.
• Custom: no-empty-file (warn)

eslint-plugin-sonarjs

• Config: recommended
• Override: no-duplicate-string (off)

Framework-specific

@next/eslint-plugin-next

• Rules: Next.js best practices (no-html-link-for-pages, no-head-element, no-document-import-in-page, etc.)

Optional (plugins only)

These configs add the plugin but do not enable rules. Extend recommended in your config for test files or as needed:

• eslint-plugin-jest — jest.configs.flat.recommended for *.test.*, *.spec.*
• eslint-plugin-testing-library — testingLibrary.configs.recommended for test files
• eslint-plugin-security — security.configs.recommended
• eslint-plugin-promise — promise.configs.recommended
• eslint-plugin-regexp — regexp.configs.recommended
• eslint-plugin-jsdoc — jsdoc.configs.recommended

@eslint/markdown

• Files: **/*.md
• Rules: All markdown rules (fenced-code-language, heading-increment, no-empty-links, etc.)

License

MIT