eslint-config-vladpuz-react

My ESLint config for React

Features:

• Supports JavaScript, TypeScript, mixed codebases, and framework/renderer-agnostic React (pure base for use with any framework and renderer!)
• Auto fix for formatting via eslint-stylistic (targeted for use without Prettier)
• Doesn't conflict with TypeScript at any tsconfig.json options (TypeScript completely replaces some rules)
• Ability to customize your own stylistic preferences
• No warn severity

Principles:

• Safety
• Consistency
• Minimal for readability
• Stability for diff

If you don't need React, use eslint-config-vladpuz.

Installation

npm install --save-dev eslint eslint-config-vladpuz-react

Usage

Create a file eslint.config.js:

import vladpuz from 'eslint-config-vladpuz-react'

export default vladpuz()

If you want to use Prettier for formatting other file types (json, md, html, css, ...), disable Prettier for JavaScript and TypeScript files. For this, create a file .prettierignore:

# javascript
*.js
*.jsx
*.mjs
*.cjs

# typescript
*.ts
*.tsx
*.mts
*.cts

Run ESLint in check mode:

eslint .

Run ESLint in fix mode:

eslint --fix .

Options

Overview:

interface Options {
  filesJs?: string[] // Default - ['**/*.js', '**/*.jsx', '**/*.mjs', '**/*.cjs']
  filesTs?: string[] // Default - ['**/*.ts', '**/*.tsx', '**/*.mts', '**/*.cts']
  env?: Array<keyof typeof globals> // Default - ['node', 'browser']
  stylistic?: boolean | StylisticOptions // Default - true
  typescript?: boolean | ParserOptions // Default - true
  react?: ReactSettings // Default - {}
  refresh?: boolean | RefreshOptions // Default - true
}

filesJs, filesTs

Type: string[]

Default for js: FILES_JS

Default for ts: FILES_TS

Override patterns for js and ts files:

import vladpuz, { FILES_JS, FILES_TS } from 'eslint-config-vladpuz-react'

// For example any additional extensions
export default vladpuz({
  filesJs: [...FILES_JS, '**/*.extension'],
  filesTs: [...FILES_TS, '**/*.extension'],
})

env

Type: string[]

Default: ['node', 'browser']

Overrides environments providing predefined global variables:

import vladpuz from 'eslint-config-vladpuz-react'

export default vladpuz({
  env: ['node'], // For example only node
})

stylistic

Type: boolean | StylisticOptions

Default: true

Enables/disables Stylistic or customizes your own stylistic preferences:

import vladpuz from 'eslint-config-vladpuz-react'

export default vladpuz({
  // Default stylistic config is:
  stylistic: {
    indent: 2,
    quotes: 'single',
    semi: false,
  },
  // You can disable stylistic:
  // stylistic: false,
})

typescript

Type: boolean | ParserOptions

Default: true

Enables/disables TypeScript or customizes its parser options.

import vladpuz from 'eslint-config-vladpuz-react'

export default vladpuz({
  // Default typescript config is:
  typescript: {
    projectService: true,
    ecmaFeatures: {
      jsx: options.jsx,
    },
  },
  // You can disable typescript:
  // typescript: false,
})

react

Type: ReactSettings

Default: {}

Details: Configure Analyzer

Configures react-x analyzer:

import vladpuz from 'eslint-config-vladpuz-react'

export default vladpuz({
  // Example:
  'react-x': {
    version: '19.1.0', // Specify the React version for semantic analysis (can be "detect" for auto-detection)
    importSource: 'react', // Customize the import source for the React module (defaults to "react")
    polymorphicPropName: 'as', // Define the prop name used for polymorphic components (e.g., <Component as="div">)
  },
})

refresh

Type: boolean | RefreshOptions

Default: true

Details: Refresh Options

Enables/disables or customizes the react-refresh plugin:

import vladpuz from 'eslint-config-vladpuz-react'

export default vladpuz({
  // Default react-refresh config is:
  refresh: {
    allowExportNames: [],
    allowConstantExport: false,
    customHOCs: [],
    checkJS: false,
  },
  // You can disable react-refresh:
  // refresh: false,
})

Additional

errorify(target)

Converts severity of rules warn/1 to error/2.

• target (Linter.Config[] | Linter.Config | Linter.RulesRecord)

Return: Linter.Config[] | Linter.Config | Linter.RulesRecord

Intended for adding external configs while preserving the overall severity style (without warn):

import vladpuz, { errorify } from 'eslint-config-vladpuz-react'
import x from 'eslint-plugin-x'

export default [...vladpuz(), errorify(x.configs.recommended)]

getCompilerOptions(parserOptions?, force?)

Gets compiler options from tsconfig.json.

• parserOptions (ParserOptions = {}) - Parser options for searching tsconfig.json.
• force (boolean = false) - Disables cache.

Return: CompilerOptions

Intended for dynamic management of rules depending on compiler options from tsconfig.json:

import { getCompilerOptions } from 'eslint-config-vladpuz-react'

const compilerOptions = getCompilerOptions()

console.log(compilerOptions.strict)
console.log(compilerOptions.noEmit)

testPluginConfig(pluginName, pluginRules, config)

Tests plugin config via node:test.

• pluginName (string | null) - Plugin name.
• pluginRules (Record<string, Rule.RuleModule>) - Plugin rules.
• config (Linter.Config) - Tested config.

Return: void

Intended for testing plugin configs inside eslint-config-vladpuz and extended configs (e.g. eslint-config-vladpuz-react/src/configs.test.ts):

import { testPluginConfig } from 'eslint-config-vladpuz-react'
import tseslint from 'typescript-eslint'

testPluginConfig('@typescript-eslint', tseslint.plugin.rules, {
  name: 'vladpuz/typescript',
  files: [],
  plugins: {
    '@typescript-eslint': tseslint.plugin,
  },
  rules: {},
})

FAQ

Prettier?

Why I don't use Prettier

Why no warn severity?

ESLint Warnings Are an Anti-Pattern

Where is the list of rules?

src/configs

Versioning Policy

This project follows Semantic Versioning. However, since this is just a configuration requiring opinions and many changeable components, we don't consider rule changes critical.

See also

• prettier-config-vladpuz