Skip to content

vtadmin: replace eslint-config-react-app with modern ESLint flat config #19664

@arthurschreiber

Description

@arthurschreiber

What's this?

eslint-config-react-app is a Create React App-era package that hasn't been updated to support ESLint 9+ or 10. It's blocking dependency upgrades (see #19660) and is effectively unmaintained. Since vtadmin uses Vite, not CRA, this is purely legacy config.

What it currently provides

The package bundles 150+ rules across 9 ESLint plugins:

  • eslint-plugin-react + eslint-plugin-react-hooks — React-specific rules
  • eslint-plugin-jsx-a11y — accessibility rules
  • eslint-plugin-import — import/export rules
  • @typescript-eslint/eslint-plugin + @typescript-eslint/parser — TypeScript rules
  • eslint-plugin-jest + eslint-plugin-testing-library — test file rules
  • eslint-plugin-flowtype — dead weight, vtadmin doesn't use Flow
  • @babel/eslint-parser — unnecessary since vtadmin is all TypeScript

The config is referenced in package.json (lines 53-58):

"eslintConfig": {
  "extends": [
    "react-app",
    "react-app/jest"
  ]
}

Migration plan

  1. Create eslint.config.js (ESLint flat config format, required for ESLint 9+)
  2. Add direct plugin dependencies:
    • @typescript-eslint/eslint-plugin + @typescript-eslint/parser
    • eslint-plugin-react + eslint-plugin-react-hooks
    • eslint-plugin-jsx-a11y
    • eslint-plugin-import
    • eslint-plugin-jest + eslint-plugin-testing-library (scoped to test files)
  3. Drop:
    • eslint-config-react-app
    • eslint-plugin-flowtype (not used)
    • @babel/eslint-parser / babel-preset-react-app (not needed with TS parser)
    • vite-plugin-eslint (unmaintained since 2022, consider vite-plugin-eslint2 or drop)
  4. Remove eslintConfig block from package.json
  5. Upgrade eslint to ^10.0.3
  6. Run npm run lint:eslint and tune rules — there are currently only 11 eslint-disable comments in the source referencing 4 rules:
    • jest/no-conditional-expect (5 instances, 3 files)
    • testing-library/render-result-naming-convention (1 instance)
    • jsx-a11y/anchor-is-valid (1 instance)
    • react-hooks/exhaustive-deps (3 instances, 2 files)

Notes

  • The flat config should be ~50-80 lines
  • Most CRA rules are set to warn — a modern config can be leaner
  • The lint:eslint script (eslint --ext js,ts,tsx src) will need updating for flat config syntax

Metadata

Metadata

Assignees

No one assigned

    Labels

    Component: VTAdminVTadmin interfaceType: EnhancementLogical improvement (somewhere between a bug and feature)

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions