Skip to content

Commit 1182309

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

3 files changed

Lines changed: 251 additions & 208 deletions

File tree

‎README.md‎

Lines changed: 250 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,250 @@
1+
# @aboutbits/eslint-config
2+
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)
5+
6+
AboutBits' [ESLint](https://eslint.org/) config presets.
7+
8+
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.
9+
10+
## Table of content
11+
12+
- [Requirements](#requirements)
13+
- [Installation](#installation)
14+
- [Configuration](#configuration)
15+
- [Presets](#presets)
16+
- [Basic setup](#basic-setup)
17+
- [Combining presets](#combining-presets)
18+
- [Ignoring files](#ignoring-files)
19+
- [Overriding rules](#overriding-rules)
20+
- [Scripts](#scripts)
21+
- [Preset-specific notes](#preset-specific-notes)
22+
- [Prettier](#prettier)
23+
- [Tailwind CSS](#tailwind-css)
24+
- [Next.js](#nextjs)
25+
- [Storybook](#storybook)
26+
- [FormatJS](#formatjs)
27+
- [Build & Publish](#build--publish)
28+
- [Information](#information)
29+
30+
## Requirements
31+
32+
- **ESLint** `^9` (flat config, i.e. an `eslint.config.js` file)
33+
34+
## Installation
35+
36+
Install the config together with its required peer dependencies:
37+
38+
```sh
39+
npm i -D @aboutbits/eslint-config eslint prettier typescript
40+
```
41+
42+
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.
43+
44+
Some presets rely on additional peer dependencies that you install only when you use them:
45+
46+
| Preset | Additional peer dependency |
47+
| ----------- | --------------------------------------------------- |
48+
| `next` | `@next/eslint-plugin-next` (`^14 \|\| ^15 \|\| ^16`) |
49+
| `storybook` | `eslint-plugin-storybook` (`^10`) |
50+
51+
We also recommend using our shared Prettier config — see [Prettier](#prettier).
52+
53+
## Configuration
54+
55+
### Presets
56+
57+
Start from the base preset and add optional presets as needed. Each preset is imported from `@aboutbits/eslint-config/configs/<name>`.
58+
59+
**Base**
60+
61+
- **`configs/ts`** — Base configuration for all TypeScript projects. Enables type-aware linting, import ordering, `unused-imports`, Prettier integration and JSON/JSONC linting.
62+
63+
**Optional**
64+
65+
- **`configs/react`** — Rules for React projects (React, React Hooks, JSX a11y).
66+
- **`configs/next`** — Rules for Next.js projects (Core Web Vitals).
67+
- **`configs/tailwind`** — Rules for Tailwind CSS (via `eslint-plugin-better-tailwindcss`).
68+
- **`configs/formatjs`** — Rules for FormatJS / `react-intl` usage and translation files.
69+
- **`configs/jest`** — Rules for Jest tests.
70+
- **`configs/storybook`** — Rules for Storybook stories and `.mdx` docs.
71+
72+
### Basic setup
73+
74+
Create an `eslint.config.js` file in the root of your project:
75+
76+
```js
77+
import ts from '@aboutbits/eslint-config/configs/ts'
78+
79+
export default [...ts]
80+
```
81+
82+
> Each preset is an array of flat-config objects, so spread it with `...`.
83+
> Type-aware linting is enabled automatically (via the TypeScript project service) — you do **not** need to set `parserOptions.project`.
84+
85+
### Combining presets
86+
87+
Add optional presets after the base preset. A typical Next.js + Tailwind project looks like this:
88+
89+
```js
90+
import ts from '@aboutbits/eslint-config/configs/ts'
91+
import react from '@aboutbits/eslint-config/configs/react'
92+
import next from '@aboutbits/eslint-config/configs/next'
93+
import tailwind from '@aboutbits/eslint-config/configs/tailwind'
94+
import formatjs from '@aboutbits/eslint-config/configs/formatjs'
95+
96+
export default [...ts, ...react, ...next, ...tailwind, ...formatjs]
97+
```
98+
99+
### Ignoring files
100+
101+
Add an object with an `ignores` key. Note that in flat config an object containing **only** `ignores` applies globally:
102+
103+
```js
104+
import ts from '@aboutbits/eslint-config/configs/ts'
105+
106+
export default [...ts, { ignores: ['node_modules', 'dist', '.next'] }]
107+
```
108+
109+
### Overriding rules
110+
111+
Append your own flat-config object after the presets:
112+
113+
```js
114+
import ts from '@aboutbits/eslint-config/configs/ts'
115+
116+
export default [
117+
...ts,
118+
{
119+
files: ['**/*.{js,mjs,cjs,jsx}'],
120+
rules: {
121+
// your overrides...
122+
'no-console': 'off',
123+
},
124+
},
125+
]
126+
```
127+
128+
## Scripts
129+
130+
Add the following scripts to your `package.json`:
131+
132+
```json
133+
{
134+
"scripts": {
135+
"lint": "eslint --cache .",
136+
"lint:fix": "npm run lint -- --fix"
137+
}
138+
}
139+
```
140+
141+
Then run:
142+
143+
```sh
144+
npm run lint # Check for issues
145+
npm run lint:fix # Fix issues automatically
146+
```
147+
148+
## Preset-specific notes
149+
150+
### Prettier
151+
152+
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:
153+
154+
```sh
155+
npm i -D @aboutbits/prettier-config
156+
```
157+
158+
```json
159+
{
160+
"prettier": "@aboutbits/prettier-config"
161+
}
162+
```
163+
164+
### Tailwind CSS
165+
166+
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.
167+
168+
**Tailwind 4** — point to your CSS entry point:
169+
170+
```js
171+
import tailwind from '@aboutbits/eslint-config/configs/tailwind'
172+
173+
export default [
174+
...tailwind,
175+
{
176+
settings: {
177+
'better-tailwindcss': {
178+
entryPoint: 'src/app.css',
179+
},
180+
},
181+
},
182+
]
183+
```
184+
185+
**Tailwind 3** — point to your config file:
186+
187+
```js
188+
import tailwind from '@aboutbits/eslint-config/configs/tailwind'
189+
190+
export default [
191+
...tailwind,
192+
{
193+
settings: {
194+
'better-tailwindcss': {
195+
tailwindConfig: 'tailwind.config.js',
196+
},
197+
},
198+
},
199+
]
200+
```
201+
202+
### Next.js
203+
204+
Install `@next/eslint-plugin-next` as a dev dependency, matching your installed Next.js version:
205+
206+
```sh
207+
npm i -D @next/eslint-plugin-next
208+
```
209+
210+
### Storybook
211+
212+
Install `eslint-plugin-storybook` as a dev dependency, matching your installed Storybook version:
213+
214+
```sh
215+
npm i -D eslint-plugin-storybook
216+
```
217+
218+
### FormatJS
219+
220+
The `formatjs` preset enforces our message conventions and additionally sorts the keys of translation files under any `translations/` directory (`**/translations/*.json`).
221+
222+
## Build & Publish
223+
224+
To build and publish the package, visit the GitHub Actions page of the repository.
225+
226+
You can choose between two workflows:
227+
228+
- `Release Package` to publish a new version of the package.
229+
- `Pre-Release Package` to publish a new pre-release version of the package.
230+
231+
**Note:** Pre-releases need to be supplied with a pre-id.
232+
233+
**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.
234+
235+
## Information
236+
237+
AboutBits is a company based in South Tyrol, Italy. You can find more information about us
238+
on [our website](https://aboutbits.it).
239+
240+
### Support
241+
242+
For support, please contact [info@aboutbits.it](mailto:info@aboutbits.it).
243+
244+
### Credits
245+
246+
- [All Contributors](../../contributors)
247+
248+
### License
249+
250+
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)