@kununu/eslint-config/README.md

kununu's ESLint config

# @kununu/eslint-config

> kununu's shared [ESLint](https://eslint.org/) config (ESLint v9 — flat config)

Shared linting rules for consistent JS, JSX, TS, and TSX across kununu's frontend
apps, BFFs, and shared libraries. It bundles the parsers and plugins it needs, so
consumers only install this one package.

> **Flat config only.** This package targets ESLint v9's flat config
> (`eslint.config.*`). There is no legacy `.eslintrc` export. (v6.0.0+ is flat
> config; v4/v5 were the legacy format.)

## 📦 Installation

```console
npm install --save-dev @kununu/eslint-config
```

`typescript` is an optional peer dependency (`>=5.0.0`) — only needed for the
type-aware TypeScript rules (see below).

## 💻 Usage

Create an **`eslint.config.mjs`** (ESM — the config is published as an ES module):

```javascript
import kununuConfig from '@kununu/eslint-config';

export default [
  ...kununuConfig,
  // your project-specific overrides here
];
```

Add a lint script to `package.json`:

```json
{
  "scripts": {
    "lint": "eslint ."
  }
}
```

See the [ESLint docs](https://eslint.org/docs/latest/use/getting-started) for more
on configuration and usage.

### TypeScript (type-aware rules)

The TS rules use `@typescript-eslint`'s `projectService`, which auto-discovers
your `tsconfig.json`. Make sure one exists at the project root, otherwise the
type-aware rules will error.

### Project-specific overrides

Append your own flat-config objects after the spread. Scope them with `files`,
and remember **last match wins**:

```javascript
import kununuConfig from '@kununu/eslint-config';

export default [
  ...kununuConfig,
  {
    rules: {
      'no-console': 'off',
    },
  },
  {
    files: ['**/*.spec.*'],
    rules: {
      // test-only tweaks
    },
  },
];
```

## 🎨 What's included

Built on `@eslint/js`, `typescript-eslint`, and the React ecosystem, plus kununu
conventions. Parsers are wired up automatically: **`.ts`/`.tsx`** use
`@typescript-eslint/parser` (with `projectService`), **`.js`/`.jsx`** use
`@babel/eslint-parser`.

| Area | Plugins |
| --- | --- |
| Base | `@eslint/js`, `typescript-eslint` |
| React | `eslint-plugin-react`, `eslint-plugin-react-hooks` (incl. React Compiler rules) |
| Accessibility | `eslint-plugin-jsx-a11y` |
| Style / formatting | `@stylistic/eslint-plugin` |
| Code smells | `eslint-plugin-sonarjs` |
| Imports / ordering | `eslint-plugin-perfectionist` |
| Tests (`*.spec.*`) | `eslint-plugin-jest`, `eslint-plugin-jest-dom`, `eslint-plugin-testing-library` |
| kununu-specific | `eslint-plugin-lodash`, `eslint-plugin-granular-selectors`, `@babel/eslint-plugin` |

### Notable conventions

- **No default React import** — `import React from 'react'` is disallowed; import
  named hooks/types instead (`import {useState} from 'react'`).
- **Per-method lodash imports** — `import debounce from 'lodash/debounce'`, not
  `import {debounce} from 'lodash'`.
- **Import ordering** (`perfectionist/sort-imports`): `react` → types →
  builtins/externals → `@kununu/*` internals → aliases → relatives.
- **Granular Redux selectors** for `use*Selector*` / `use*Store*` hooks.
- **Formatting** via `@stylistic` (120-char lines ignoring comments/strings/URLs,
  semicolons, single quotes, …).
- **React Compiler rules** (`react-hooks/refs`, `set-state-in-effect`, …) are
  **warnings**, not errors.
- **Test files** (`**/*.spec.*`) automatically get Jest globals plus the jest /
  jest-dom / testing-library rule sets; some source-only rules (e.g.
  `react/prop-types`, `sonarjs/no-hardcoded-passwords`) are relaxed there.

## ⚡️ Editor integration

Linting runs in CI / pre-commit, but catching errors in your editor is faster. We
recommend the
[ESLint VS Code extension](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint).

Recent versions auto-detect flat config. If your editor still defaults to the
legacy format, enable it in `.vscode/settings.json`:

```json
{
  "eslint.useFlatConfig": true
}
```