Skip to content

Commit 62a2f7f

Browse files
lukasvicelukasvice
authored
update readme for eslint 9 (#32)
* update readme for eslint 9 * rename readme to lowercase filename
1 parent b1935b7 commit 62a2f7f

1 file changed

Lines changed: 153 additions & 113 deletions

File tree

‎readme.md‎

Lines changed: 153 additions & 113 deletions
Original file line numberDiff line numberDiff line change
@@ -1,187 +1,227 @@
11
# @aboutbits/eslint-config
22

3-
[![npm package](https://badge.fury.io/js/%40aboutbits%2Feslint-config.svg)](https://badge.fury.io/js/%40aboutbits%2Feslint-config)
4-
[![license](https://img.shields.io/github/license/aboutbits/eslint-config)](https://github.com/aboutbits/eslint-config/blob/main/license.md)
3+
AboutBits' [ESLint](https://eslint.org/) config presets.
54

6-
AboutBit's [ESLint](https://eslint.org/) config presets
5+
This package targets **ESLint 9 (flat config)** and ships a set of composable presets for our TypeScript, React, Next.js, Tailwind CSS and related projects. All plugins are bundled as direct dependencies, so you only need to install ESLint itself and a few peer tools.
76

87
## Table of content
98

10-
- [Usage](#usage)
11-
- [TypeScript](#typescript)
12-
- [TypeScript + React](#typescript--react)
13-
- [TypeScript + Next.js](#typescript--nextjs)
14-
- [FormatJS](#formatjs)
9+
- [Requirements](#requirements)
10+
- [Installation](#installation)
11+
- [Configuration](#configuration)
12+
- [Presets](#presets)
13+
- [Basic setup](#basic-setup)
1514
- [Combining presets](#combining-presets)
16-
- [Overriding Rules](#overriding-rules)
15+
- [Ignoring files](#ignoring-files)
16+
- [Overriding rules](#overriding-rules)
17+
- [Scripts](#scripts)
18+
- [Preset-specific notes](#preset-specific-notes)
19+
- [Prettier](#prettier)
20+
- [Tailwind CSS](#tailwind-css)
21+
- [Next.js](#nextjs)
22+
- [Storybook](#storybook)
23+
- [FormatJS](#formatjs)
1724
- [Build & Publish](#build--publish)
18-
- [About](#about)
25+
- [Information](#information)
26+
27+
## Requirements
1928

20-
## Usage
29+
- **ESLint** `^9` (flat config, i.e. an `eslint.config.js` file)
2130

22-
Install the package:
31+
## Installation
32+
33+
Install the config together with its required peer dependencies:
2334

2435
```sh
25-
npm i -D @aboutbits/eslint-config
36+
npm i -D @aboutbits/eslint-config eslint prettier typescript
2637
```
2738

28-
We recommend linting by running `eslint` without `--ext` option. What files are to be linted should be specified inside the ESLint config and the TypeScript config.
29-
All files included (or not ignored) by the ESLint config (`.eslintrc.json`) must be included by the TypeScript config (`tsconfig.json`).
30-
For example, if this is your `.eslintrc.json`:
39+
Unlike the previous (ESLint 8) version, you no longer need to install `@typescript-eslint/*`, `eslint-plugin-import`, `eslint-plugin-react` and the rest by hand — they are bundled with this package.
3140

32-
```jsonc
33-
{
34-
// ...remaining config
35-
"ignorePatterns": ["node_modules", "dist"]
36-
}
37-
```
41+
Some presets rely on additional peer dependencies that you install only when you use them:
3842

39-
You may include the following files inside your `tsconfig.json`:
43+
| Preset | Additional peer dependency |
44+
| ----------- | --------------------------------------------------- |
45+
| `next` | `@next/eslint-plugin-next` (`^14 \|\| ^15 \|\| ^16`) |
46+
| `storybook` | `eslint-plugin-storybook` (`^10`) |
4047

41-
```jsonc
42-
{
43-
// ...remaining config
44-
"exclude": ["node_modules", "dist"],
45-
"include": ["**/*.ts", "**/*.tsx"]
46-
}
47-
```
48+
We also recommend using our shared Prettier config — see [Prettier](#prettier).
4849

49-
Should you have files that you want to be linted, but not inside your `tsconfig.json`, you can create a `tsconfig.eslint.json` file.
50-
Then change `.eslintrc.json` to be:
50+
## Configuration
5151

52-
```jsonc
53-
{
54-
// ...omitted
55-
"parserOptions": {
56-
"project": "./tsconfig.eslint.json"
57-
}
58-
// ...omitted
59-
}
60-
```
52+
### Presets
6153

62-
### TypeScript
54+
Start from the base preset and add optional presets as needed. Each preset is imported from `@aboutbits/eslint-config/configs/<name>`.
6355

64-
Install the required packages, assuming that you have TypeScript already installed:
56+
**Base**
6557

66-
```sh
67-
npm i -D eslint prettier @typescript-eslint/eslint-plugin eslint-plugin-prettier eslint-plugin-import eslint-plugin-unused-imports@^3
68-
```
58+
- **`configs/ts`** — Base configuration for all TypeScript projects. Enables type-aware linting, import ordering, `unused-imports`, Prettier integration and JSON/JSONC linting.
6959

70-
`.eslintrc.json`
60+
**Optional**
7161

72-
```json
73-
{
74-
"extends": "@aboutbits/eslint-config/ts",
75-
"parserOptions": {
76-
"project": true
77-
}
78-
}
62+
- **`configs/react`** — Rules for React projects (React, React Hooks, JSX a11y).
63+
- **`configs/next`** — Rules for Next.js projects (Core Web Vitals).
64+
- **`configs/tailwind`** — Rules for Tailwind CSS (via `eslint-plugin-better-tailwindcss`).
65+
- **`configs/formatjs`** — Rules for FormatJS / `react-intl` usage and translation files.
66+
- **`configs/jest`** — Rules for Jest tests.
67+
- **`configs/storybook`** — Rules for Storybook stories and `.mdx` docs.
68+
69+
### Basic setup
70+
71+
Create an `eslint.config.js` file in the root of your project:
72+
73+
```js
74+
import ts from '@aboutbits/eslint-config/configs/ts'
75+
76+
export default [...ts]
7977
```
8078

81-
### TypeScript + React
79+
> Each preset is an array of flat-config objects, so spread it with `...`.
80+
> Type-aware linting is enabled automatically (via the TypeScript project service) — you do **not** need to set `parserOptions.project`.
81+
82+
### Combining presets
8283

83-
Install the required packages, assuming that you have TypeScript already installed:
84+
Add optional presets after the base preset. A typical Next.js + Tailwind project looks like this:
8485

85-
```sh
86-
npm i -D eslint prettier @typescript-eslint/eslint-plugin eslint-plugin-prettier eslint-plugin-import eslint-plugin-unused-imports@^3 eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-jsx-a11y eslint-plugin-better-tailwindcss
86+
```js
87+
import ts from '@aboutbits/eslint-config/configs/ts'
88+
import react from '@aboutbits/eslint-config/configs/react'
89+
import next from '@aboutbits/eslint-config/configs/next'
90+
import tailwind from '@aboutbits/eslint-config/configs/tailwind'
91+
import formatjs from '@aboutbits/eslint-config/configs/formatjs'
92+
93+
export default [...ts, ...react, ...next, ...tailwind, ...formatjs]
8794
```
8895

89-
`.eslintrc.json`
96+
### Ignoring files
9097

91-
```json
92-
{
93-
"extends": "@aboutbits/eslint-config/ts-react",
94-
"parserOptions": {
95-
"project": true
96-
}
97-
}
98+
Add an object with an `ignores` key. Note that in flat config an object containing **only** `ignores` applies globally:
99+
100+
```js
101+
import ts from '@aboutbits/eslint-config/configs/ts'
102+
103+
export default [...ts, { ignores: ['node_modules', 'dist', '.next'] }]
98104
```
99105

100-
### TypeScript + Next.js
106+
### Overriding rules
101107

102-
Install the required packages, assuming that you have TypeScript already installed:
108+
Append your own flat-config object after the presets:
103109

104-
```sh
105-
npm i -D eslint prettier @typescript-eslint/eslint-plugin eslint-plugin-prettier eslint-plugin-import eslint-plugin-unused-imports@^3 eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-jsx-a11y eslint-plugin-better-tailwindcss @next/eslint-plugin-next
110+
```js
111+
import ts from '@aboutbits/eslint-config/configs/ts'
112+
113+
export default [
114+
...ts,
115+
{
116+
files: ['**/*.{js,mjs,cjs,jsx}'],
117+
rules: {
118+
// your overrides...
119+
'no-console': 'off',
120+
},
121+
},
122+
]
106123
```
107124

108-
`.eslintrc.json`
125+
## Scripts
126+
127+
Add the following scripts to your `package.json`:
109128

110129
```json
111130
{
112-
"extends": "@aboutbits/eslint-config/ts-next",
113-
"parserOptions": {
114-
"project": true
131+
"scripts": {
132+
"lint": "eslint --cache .",
133+
"lint:fix": "npm run lint -- --fix"
115134
}
116135
}
117136
```
118137

119-
### FormatJS
120-
121-
Install the required packages, assuming that you have TypeScript already installed:
138+
Then run:
122139

123140
```sh
124-
npm i -D eslint eslint-plugin-formatjs
141+
npm run lint # Check for issues
142+
npm run lint:fix # Fix issues automatically
125143
```
126144

127-
`.eslintrc.json`
145+
## Preset-specific notes
146+
147+
### Prettier
148+
149+
The `ts` preset integrates Prettier through `eslint-plugin-prettier`, so formatting problems are reported (and auto-fixed) by ESLint. You still need a Prettier configuration. We recommend our shared config:
150+
151+
```sh
152+
npm i -D @aboutbits/prettier-config
153+
```
128154

129155
```json
130156
{
131-
"extends": "@aboutbits/eslint-config/formatjs",
132-
"parserOptions": {
133-
"project": true
134-
}
157+
"prettier": "@aboutbits/prettier-config"
135158
}
136159
```
137160

138-
### Combining presets
161+
### Tailwind CSS
139162

140-
Most presets are mutually exclusive, which means that you should not combine them.
141-
However, you may combine the preset `formatjs` with any other preset you like.
142-
The following shows how to combine it with the preset `ts-next`:
163+
The `tailwind` preset is preconfigured to recognise classes in `className` props as well as `classNames`/`*ClassName(s)` helpers. It supports both Tailwind 3 and 4, but you must tell the plugin where your Tailwind setup lives.
143164

144-
Install the required packages, assuming that you have TypeScript already installed:
165+
**Tailwind 4** — point to your CSS entry point:
145166

146-
```sh
147-
npm i -D eslint prettier @typescript-eslint/eslint-plugin eslint-plugin-prettier eslint-plugin-import eslint-plugin-unused-imports@^3 eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-jsx-a11y eslint-plugin-better-tailwindcss @next/eslint-plugin-next eslint-plugin-formatjs
167+
```js
168+
import tailwind from '@aboutbits/eslint-config/configs/tailwind'
169+
170+
export default [
171+
...tailwind,
172+
{
173+
settings: {
174+
'better-tailwindcss': {
175+
entryPoint: 'src/app.css',
176+
},
177+
},
178+
},
179+
]
148180
```
149181

150-
`.eslintrc.json`
182+
**Tailwind 3** — point to your config file:
151183

152-
```json
153-
{
154-
"extends": [
155-
"@aboutbits/eslint-config/ts-next",
156-
"@aboutbits/eslint-config/formatjs"
157-
],
158-
"parserOptions": {
159-
"project": true
160-
}
161-
}
184+
```js
185+
import tailwind from '@aboutbits/eslint-config/configs/tailwind'
186+
187+
export default [
188+
...tailwind,
189+
{
190+
settings: {
191+
'better-tailwindcss': {
192+
tailwindConfig: 'tailwind.config.js',
193+
},
194+
},
195+
},
196+
]
162197
```
163198

164-
### Overriding rules
199+
### Next.js
165200

166-
`.eslintrc.json`
201+
Install `@next/eslint-plugin-next` as a dev dependency, matching your installed Next.js version:
167202

168-
```jsonc
169-
{
170-
"extends": "@aboutbits/eslint-config/ts",
171-
"parserOptions": {
172-
"project": true
173-
},
174-
"rules": {
175-
// your rules...
176-
}
177-
}
203+
```sh
204+
npm i -D @next/eslint-plugin-next
178205
```
179206

207+
### Storybook
208+
209+
Install `eslint-plugin-storybook` as a dev dependency, matching your installed Storybook version:
210+
211+
```sh
212+
npm i -D eslint-plugin-storybook
213+
```
214+
215+
### FormatJS
216+
217+
The `formatjs` preset enforces our message conventions and additionally sorts the keys of translation files under any `translations/` directory (`**/translations/*.json`).
218+
180219
## Build & Publish
181220

182221
To build and publish the package, visit the GitHub Actions page of the repository.
183222

184223
You can choose between two workflows:
224+
185225
- `Release Package` to publish a new version of the package.
186226
- `Pre-Release Package` to publish a new pre-release version of the package.
187227

0 commit comments

Comments
 (0)