@financedistrict/apps-eslint-config

Shared ESLint flat config for FD apps: @eslint/js recommended + typescript-eslint recommended (type-unaware — see below) + eslint-plugin-react + eslint-plugin-react-hooks + eslint-plugin-jsx-a11y, plus one DS-specific rule, fd/no-raw-color-classes, that flags raw Tailwind palette classes (bg-purple-500) in className/cva/clsx/cn/twMerge call sites and points at the semantic token layer instead (.claude/rules/tokens-and-styling.md).

Ships buildless — plain ESM under src/, no dist/. An ESLint flat config is just a JS array; there's no type-safety or bundle-size reason to run it through tsup like the runtime packages, and skipping the build removes one failure mode for something this small. See ADR-0108.

Install

npm install --save-dev @financedistrict/apps-eslint-config eslint

Peer range is eslint@^9.0.0, not the just-released ESLint 10 — eslint-plugin-react and eslint-plugin-jsx-a11y haven't published a 10.x-compatible peer range yet (checked against the registry 2026-09-22; @eslint/js/typescript-eslint/ eslint-plugin-react-hooks already support 10). npm does flag ESLint 9 itself as no-longer-supported on install — a real tradeoff, not an oversight: the alternative is forcing the two lagging plugins onto 10 past their declared range, unverified. Move to 10 once both plugins publish a compatible peer range; re-check the registry before then, this note will go stale.

Usage

// eslint.config.js
import fdConfig from "@financedistrict/apps-eslint-config";

export default [
  ...fdConfig,
  {
    ignores: ["dist/**"],
  },
  // your app-specific overrides here
];

What's deliberately not included

• recommendedTypeChecked — typescript-eslint's type-aware rules (no-floating-promises, no-misused-promises, …) need the full TS program built, which costs real CI time/memory. Add it yourself if you want it:

  import tseslint from "typescript-eslint";
  import fdConfig from "@financedistrict/apps-eslint-config";
  
  export default [
    ...fdConfig,
    ...tseslint.configs.recommendedTypeChecked,
    { languageOptions: { parserOptions: { projectService: true } } },
  ];

• eslint-plugin-react-refresh — relevant to a Vite dev server, not to this package or to @financedistrict/apps-ui itself (built with tsup). Add it in the app's own config if wanted.

• eslint-plugin-storybook — worth adding directly in packages/components's own config given how story-heavy it is; not universal enough for every consumer to belong here.

fd/no-raw-color-classes

Heuristic, not a full Tailwind-aware analysis — it checks className JSX attributes and string/template literals nested inside a cva/clsx/cn/ twMerge call. It will not catch a raw color built up through string concatenation or passed through an intermediate variable before reaching one of those call sites.

// ❌ flagged
<div className="bg-purple-500" />

// ✅
<div className="bg-card-background" />