Skip to content

Commit 4ff3c67

Browse files
lukasvicelukasvice
committed
update readme for eslint 9
1 parent b1935b7 commit 4ff3c67

3 files changed

Lines changed: 248 additions & 208 deletions

File tree

‎README.md‎

Lines changed: 247 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,247 @@
1+
# @aboutbits/eslint-config
2+
3+
AboutBits' [ESLint](https://eslint.org/) config presets.
4+
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.
6+
7+
## Table of content
8+
9+
- [Requirements](#requirements)
10+
- [Installation](#installation)
11+
- [Configuration](#configuration)
12+
- [Presets](#presets)
13+
- [Basic setup](#basic-setup)
14+
- [Combining presets](#combining-presets)
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)
24+
- [Build & Publish](#build--publish)
25+
- [Information](#information)
26+
27+
## Requirements
28+
29+
- **ESLint** `^9` (flat config, i.e. an `eslint.config.js` file)
30+
31+
## Installation
32+
33+
Install the config together with its required peer dependencies:
34+
35+
```sh
36+
npm i -D @aboutbits/eslint-config eslint prettier typescript
37+
```
38+
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.
40+
41+
Some presets rely on additional peer dependencies that you install only when you use them:
42+
43+
| Preset | Additional peer dependency |
44+
| ----------- | --------------------------------------------------- |
45+
| `next` | `@next/eslint-plugin-next` (`^14 \|\| ^15 \|\| ^16`) |
46+
| `storybook` | `eslint-plugin-storybook` (`^10`) |
47+
48+
We also recommend using our shared Prettier config — see [Prettier](#prettier).
49+
50+
## Configuration
51+
52+
### Presets
53+
54+
Start from the base preset and add optional presets as needed. Each preset is imported from `@aboutbits/eslint-config/configs/<name>`.
55+
56+
**Base**
57+
58+
- **`configs/ts`** — Base configuration for all TypeScript projects. Enables type-aware linting, import ordering, `unused-imports`, Prettier integration and JSON/JSONC linting.
59+
60+
**Optional**
61+
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]
77+
```
78+
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
83+
84+
Add optional presets after the base preset. A typical Next.js + Tailwind project looks like this:
85+
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]
94+
```
95+
96+
### Ignoring files
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'] }]
104+
```
105+
106+
### Overriding rules
107+
108+
Append your own flat-config object after the presets:
109+
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+
]
123+
```
124+
125+
## Scripts
126+
127+
Add the following scripts to your `package.json`:
128+
129+
```json
130+
{
131+
"scripts": {
132+
"lint": "eslint --cache .",
133+
"lint:fix": "npm run lint -- --fix"
134+
}
135+
}
136+
```
137+
138+
Then run:
139+
140+
```sh
141+
npm run lint # Check for issues
142+
npm run lint:fix # Fix issues automatically
143+
```
144+
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+
```
154+
155+
```json
156+
{
157+
"prettier": "@aboutbits/prettier-config"
158+
}
159+
```
160+
161+
### Tailwind CSS
162+
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.
164+
165+
**Tailwind 4** — point to your CSS entry point:
166+
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+
]
180+
```
181+
182+
**Tailwind 3** — point to your config file:
183+
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+
]
197+
```
198+
199+
### Next.js
200+
201+
Install `@next/eslint-plugin-next` as a dev dependency, matching your installed Next.js version:
202+
203+
```sh
204+
npm i -D @next/eslint-plugin-next
205+
```
206+
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+
219+
## Build & Publish
220+
221+
To build and publish the package, visit the GitHub Actions page of the repository.
222+
223+
You can choose between two workflows:
224+
225+
- `Release Package` to publish a new version of the package.
226+
- `Pre-Release Package` to publish a new pre-release version of the package.
227+
228+
**Note:** Pre-releases need to be supplied with a pre-id.
229+
230+
**Note:** To increment a pre-release, you have to run the normal release workflow and select "prerelease". For this action you need to already be on a pre-release version.
231+
232+
## Information
233+
234+
AboutBits is a company based in South Tyrol, Italy. You can find more information about us
235+
on [our website](https://aboutbits.it).
236+
237+
### Support
238+
239+
For support, please contact [info@aboutbits.it](mailto:info@aboutbits.it).
240+
241+
### Credits
242+
243+
- [All Contributors](../../contributors)
244+
245+
### License
246+
247+
The MIT License (MIT). Please see the [license file](license.md) for more information.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@
3434
"configs/storybook.js",
3535
"configs/tailwind.js",
3636
"configs/ts.js",
37-
"readme.md"
37+
"README.md"
3838
],
3939
"exports": {
4040
"./configs/formatjs": "./configs/formatjs.js",

0 commit comments

Comments
 (0)