@arbor-education/eslint-config

Shared ESLint flat config for Arbor frontend packages. One toolchain, one formatting standard, across arbor-fe-library and design-system.components.

• ESLint 9 flat config (ESM). No build step — plain JS with JSDoc types.
• Prettier is the formatter. The shared layer runs Prettier as a lint rule and ships the canonical Prettier options as a single source of truth.
• Composable exports — spread the whole recommended stack, or pick layers.

Install

Requires Node ≥ 20 and ESLint ≥ 9.33.

yarn add --dev @arbor-education/eslint-config eslint

ESLint plugins (typescript-eslint, eslint-plugin-react, eslint-plugin-react-hooks, prettier, …) are bundled as dependencies — you do not install them separately. eslint itself is a peer dependency, and typescript is an optional peer (add it if you lint TypeScript).

Usage

ESLint

// eslint.config.mts
import arbor from '@arbor-education/eslint-config';
import {globalIgnores} from 'eslint/config';

export default [
    globalIgnores(['dist/**', 'coverage/**']),
    ...arbor.recommended, // base + react + reactHooks + prettier (prettier last)
    {
        // your project-specific overrides go here
    },
];

Prefer the individual layers if you need finer control:

import {base, react, reactHooks, prettier} from '@arbor-education/eslint-config';

export default [
    ...base,
    ...react,
    ...reactHooks,
    ...prettier, // ALWAYS last — disables conflicting formatting rules
];

Prettier

Re-export the shared options so the Prettier CLI and your editor use the same settings ESLint enforces:

// prettier.config.js
export {default} from '@arbor-education/eslint-config/prettier';

What's in the box

| Export | Subpath | Contents | | --- | --- | --- | | base | ./base | @eslint/js + typescript-eslint recommended, Arbor house rules, .d.ts and test-file relaxations | | react | ./react | eslint-plugin-react recommended, tuned for the automatic JSX runtime | | reactHooks | ./react-hooks | eslint-plugin-react-hooks recommended | | prettier | — | Prettier-as-a-lint-rule with the shared options baked in (spread last) | | recommended | — | base + react + reactHooks + prettier | | relativeImportExtensionsConfig | ./relative-import-extensions | Opt-in. Requires file extensions on relative imports (bundler + verbatimModuleSyntax repos only) | | (Prettier options) | ./prettier | The Prettier options object for prettier.config.js |

House rules (in base)

• @typescript-eslint/consistent-type-definitions: ['error', 'type'] (off in .d.ts)
• no-nested-ternary: error
• curly: ['error', 'all']
• no-restricted-imports — bans deep relative imports (../../*); use a path alias
• no-restricted-syntax — useEffect must declare a dependency array

Tests, stories and mocks (*.test.*, *.spec.*, *.stories.tsx, *.story.tsx, test/**, **/__mocks__/**) relax no-restricted-imports, no-nested-ternary and curly.

Formatting standard

Prettier, with these options (from ./prettier):

{
    "singleQuote": true,
    "semi": true,
    "trailingComma": "all",
    "tabWidth": 4,
    "bracketSpacing": false
}

Migrating the consumer repos

arbor-fe-library

The base already mirrors most of client/eslint.config.mts.

• Replace the js/tseslint/react/hooks/prettier boilerplate with ...arbor.recommended.
• Keep locally (project-specific, not shared): the ExtJS/global list (Ext, Mis, …), the import resolver alias map, the webpack/** and **/*.{js,jsx} overrides, the "re-enable later" warn block, and ignores.
• Its existing .prettierrc matches the shared options — swap it for a prettier.config.js that re-exports ./prettier (or leave .prettierrc as the values are identical).

design-system.components

Formatting moves from @stylistic to Prettier.

• Remove @stylistic/eslint-plugin and the stylistic.configs.customize(...) block; spread ...arbor.recommended instead.
• Add a prettier.config.js re-exporting ./prettier, then run yarn eslint . --fix (or yarn prettier --write) once — expect a large reformat diff (2-space → 4-space, { x } → {x}). Land it as its own commit.
• Keep the local relative-import-extensions rule by spreading @arbor-education/eslint-config/relative-import-extensions.
• Keep DS-only rules locally: @typescript-eslint/no-namespace: off and the Components/*, Utils/* alias-aware no-restricted-imports message.

Development

yarn install
yarn test