From 4ff3c67ca7dfb3d6b61462fe84b03eab12183716 Mon Sep 17 00:00:00 2001 From: Lukas Weiss Date: Tue, 21 Jul 2026 09:40:56 +0200 Subject: [PATCH 1/2] update readme for eslint 9 --- README.md | 247 +++++++++++++++++++++++++++++++++++++++++++++++++++ package.json | 2 +- readme.md | 207 ------------------------------------------ 3 files changed, 248 insertions(+), 208 deletions(-) create mode 100644 README.md delete mode 100644 readme.md diff --git a/README.md b/README.md new file mode 100644 index 0000000..c97dc43 --- /dev/null +++ b/README.md @@ -0,0 +1,247 @@ +# @aboutbits/eslint-config + +AboutBits' [ESLint](https://eslint.org/) config presets. + +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. + +## Table of content + +- [Requirements](#requirements) +- [Installation](#installation) +- [Configuration](#configuration) + - [Presets](#presets) + - [Basic setup](#basic-setup) + - [Combining presets](#combining-presets) + - [Ignoring files](#ignoring-files) + - [Overriding rules](#overriding-rules) +- [Scripts](#scripts) +- [Preset-specific notes](#preset-specific-notes) + - [Prettier](#prettier) + - [Tailwind CSS](#tailwind-css) + - [Next.js](#nextjs) + - [Storybook](#storybook) + - [FormatJS](#formatjs) +- [Build & Publish](#build--publish) +- [Information](#information) + +## Requirements + +- **ESLint** `^9` (flat config, i.e. an `eslint.config.js` file) + +## Installation + +Install the config together with its required peer dependencies: + +```sh +npm i -D @aboutbits/eslint-config eslint prettier typescript +``` + +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. + +Some presets rely on additional peer dependencies that you install only when you use them: + +| Preset | Additional peer dependency | +| ----------- | --------------------------------------------------- | +| `next` | `@next/eslint-plugin-next` (`^14 \|\| ^15 \|\| ^16`) | +| `storybook` | `eslint-plugin-storybook` (`^10`) | + +We also recommend using our shared Prettier config — see [Prettier](#prettier). + +## Configuration + +### Presets + +Start from the base preset and add optional presets as needed. Each preset is imported from `@aboutbits/eslint-config/configs/`. + +**Base** + +- **`configs/ts`** — Base configuration for all TypeScript projects. Enables type-aware linting, import ordering, `unused-imports`, Prettier integration and JSON/JSONC linting. + +**Optional** + +- **`configs/react`** — Rules for React projects (React, React Hooks, JSX a11y). +- **`configs/next`** — Rules for Next.js projects (Core Web Vitals). +- **`configs/tailwind`** — Rules for Tailwind CSS (via `eslint-plugin-better-tailwindcss`). +- **`configs/formatjs`** — Rules for FormatJS / `react-intl` usage and translation files. +- **`configs/jest`** — Rules for Jest tests. +- **`configs/storybook`** — Rules for Storybook stories and `.mdx` docs. + +### Basic setup + +Create an `eslint.config.js` file in the root of your project: + +```js +import ts from '@aboutbits/eslint-config/configs/ts' + +export default [...ts] +``` + +> Each preset is an array of flat-config objects, so spread it with `...`. +> Type-aware linting is enabled automatically (via the TypeScript project service) — you do **not** need to set `parserOptions.project`. + +### Combining presets + +Add optional presets after the base preset. A typical Next.js + Tailwind project looks like this: + +```js +import ts from '@aboutbits/eslint-config/configs/ts' +import react from '@aboutbits/eslint-config/configs/react' +import next from '@aboutbits/eslint-config/configs/next' +import tailwind from '@aboutbits/eslint-config/configs/tailwind' +import formatjs from '@aboutbits/eslint-config/configs/formatjs' + +export default [...ts, ...react, ...next, ...tailwind, ...formatjs] +``` + +### Ignoring files + +Add an object with an `ignores` key. Note that in flat config an object containing **only** `ignores` applies globally: + +```js +import ts from '@aboutbits/eslint-config/configs/ts' + +export default [...ts, { ignores: ['node_modules', 'dist', '.next'] }] +``` + +### Overriding rules + +Append your own flat-config object after the presets: + +```js +import ts from '@aboutbits/eslint-config/configs/ts' + +export default [ + ...ts, + { + files: ['**/*.{js,mjs,cjs,jsx}'], + rules: { + // your overrides... + 'no-console': 'off', + }, + }, +] +``` + +## Scripts + +Add the following scripts to your `package.json`: + +```json +{ + "scripts": { + "lint": "eslint --cache .", + "lint:fix": "npm run lint -- --fix" + } +} +``` + +Then run: + +```sh +npm run lint # Check for issues +npm run lint:fix # Fix issues automatically +``` + +## Preset-specific notes + +### Prettier + +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: + +```sh +npm i -D @aboutbits/prettier-config +``` + +```json +{ + "prettier": "@aboutbits/prettier-config" +} +``` + +### Tailwind CSS + +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. + +**Tailwind 4** — point to your CSS entry point: + +```js +import tailwind from '@aboutbits/eslint-config/configs/tailwind' + +export default [ + ...tailwind, + { + settings: { + 'better-tailwindcss': { + entryPoint: 'src/app.css', + }, + }, + }, +] +``` + +**Tailwind 3** — point to your config file: + +```js +import tailwind from '@aboutbits/eslint-config/configs/tailwind' + +export default [ + ...tailwind, + { + settings: { + 'better-tailwindcss': { + tailwindConfig: 'tailwind.config.js', + }, + }, + }, +] +``` + +### Next.js + +Install `@next/eslint-plugin-next` as a dev dependency, matching your installed Next.js version: + +```sh +npm i -D @next/eslint-plugin-next +``` + +### Storybook + +Install `eslint-plugin-storybook` as a dev dependency, matching your installed Storybook version: + +```sh +npm i -D eslint-plugin-storybook +``` + +### FormatJS + +The `formatjs` preset enforces our message conventions and additionally sorts the keys of translation files under any `translations/` directory (`**/translations/*.json`). + +## Build & Publish + +To build and publish the package, visit the GitHub Actions page of the repository. + +You can choose between two workflows: + +- `Release Package` to publish a new version of the package. +- `Pre-Release Package` to publish a new pre-release version of the package. + +**Note:** Pre-releases need to be supplied with a pre-id. + +**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. + +## Information + +AboutBits is a company based in South Tyrol, Italy. You can find more information about us +on [our website](https://aboutbits.it). + +### Support + +For support, please contact [info@aboutbits.it](mailto:info@aboutbits.it). + +### Credits + +- [All Contributors](../../contributors) + +### License + +The MIT License (MIT). Please see the [license file](license.md) for more information. diff --git a/package.json b/package.json index 50b235f..93ddace 100644 --- a/package.json +++ b/package.json @@ -34,7 +34,7 @@ "configs/storybook.js", "configs/tailwind.js", "configs/ts.js", - "readme.md" + "README.md" ], "exports": { "./configs/formatjs": "./configs/formatjs.js", diff --git a/readme.md b/readme.md deleted file mode 100644 index 0e0e55f..0000000 --- a/readme.md +++ /dev/null @@ -1,207 +0,0 @@ -# @aboutbits/eslint-config - -[![npm package](https://badge.fury.io/js/%40aboutbits%2Feslint-config.svg)](https://badge.fury.io/js/%40aboutbits%2Feslint-config) -[![license](https://img.shields.io/github/license/aboutbits/eslint-config)](https://github.com/aboutbits/eslint-config/blob/main/license.md) - -AboutBit's [ESLint](https://eslint.org/) config presets - -## Table of content - -- [Usage](#usage) - - [TypeScript](#typescript) - - [TypeScript + React](#typescript--react) - - [TypeScript + Next.js](#typescript--nextjs) - - [FormatJS](#formatjs) - - [Combining presets](#combining-presets) - - [Overriding Rules](#overriding-rules) -- [Build & Publish](#build--publish) -- [About](#about) - -## Usage - -Install the package: - -```sh -npm i -D @aboutbits/eslint-config -``` - -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. -All files included (or not ignored) by the ESLint config (`.eslintrc.json`) must be included by the TypeScript config (`tsconfig.json`). -For example, if this is your `.eslintrc.json`: - -```jsonc -{ - // ...remaining config - "ignorePatterns": ["node_modules", "dist"] -} -``` - -You may include the following files inside your `tsconfig.json`: - -```jsonc -{ - // ...remaining config - "exclude": ["node_modules", "dist"], - "include": ["**/*.ts", "**/*.tsx"] -} -``` - -Should you have files that you want to be linted, but not inside your `tsconfig.json`, you can create a `tsconfig.eslint.json` file. -Then change `.eslintrc.json` to be: - -```jsonc -{ - // ...omitted - "parserOptions": { - "project": "./tsconfig.eslint.json" - } - // ...omitted -} -``` - -### TypeScript - -Install the required packages, assuming that you have TypeScript already installed: - -```sh -npm i -D eslint prettier @typescript-eslint/eslint-plugin eslint-plugin-prettier eslint-plugin-import eslint-plugin-unused-imports@^3 -``` - -`.eslintrc.json` - -```json -{ - "extends": "@aboutbits/eslint-config/ts", - "parserOptions": { - "project": true - } -} -``` - -### TypeScript + React - -Install the required packages, assuming that you have TypeScript already installed: - -```sh -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 -``` - -`.eslintrc.json` - -```json -{ - "extends": "@aboutbits/eslint-config/ts-react", - "parserOptions": { - "project": true - } -} -``` - -### TypeScript + Next.js - -Install the required packages, assuming that you have TypeScript already installed: - -```sh -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 -``` - -`.eslintrc.json` - -```json -{ - "extends": "@aboutbits/eslint-config/ts-next", - "parserOptions": { - "project": true - } -} -``` - -### FormatJS - -Install the required packages, assuming that you have TypeScript already installed: - -```sh -npm i -D eslint eslint-plugin-formatjs -``` - -`.eslintrc.json` - -```json -{ - "extends": "@aboutbits/eslint-config/formatjs", - "parserOptions": { - "project": true - } -} -``` - -### Combining presets - -Most presets are mutually exclusive, which means that you should not combine them. -However, you may combine the preset `formatjs` with any other preset you like. -The following shows how to combine it with the preset `ts-next`: - -Install the required packages, assuming that you have TypeScript already installed: - -```sh -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 -``` - -`.eslintrc.json` - -```json -{ - "extends": [ - "@aboutbits/eslint-config/ts-next", - "@aboutbits/eslint-config/formatjs" - ], - "parserOptions": { - "project": true - } -} -``` - -### Overriding rules - -`.eslintrc.json` - -```jsonc -{ - "extends": "@aboutbits/eslint-config/ts", - "parserOptions": { - "project": true - }, - "rules": { - // your rules... - } -} -``` - -## Build & Publish - -To build and publish the package, visit the GitHub Actions page of the repository. - -You can choose between two workflows: -- `Release Package` to publish a new version of the package. -- `Pre-Release Package` to publish a new pre-release version of the package. - -**Note:** Pre-releases need to be supplied with a pre-id. - -**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. - -## Information - -AboutBits is a company based in South Tyrol, Italy. You can find more information about us -on [our website](https://aboutbits.it). - -### Support - -For support, please contact [info@aboutbits.it](mailto:info@aboutbits.it). - -### Credits - -- [All Contributors](../../contributors) - -### License - -The MIT License (MIT). Please see the [license file](license.md) for more information. From 49f9a474c78d5720fd6d6bf3c781e801d56eb271 Mon Sep 17 00:00:00 2001 From: Lukas Weiss Date: Tue, 21 Jul 2026 09:56:11 +0200 Subject: [PATCH 2/2] rename readme to lowercase filename --- package.json | 2 +- README.md => readme.md | 0 2 files changed, 1 insertion(+), 1 deletion(-) rename README.md => readme.md (100%) diff --git a/package.json b/package.json index 93ddace..50b235f 100644 --- a/package.json +++ b/package.json @@ -34,7 +34,7 @@ "configs/storybook.js", "configs/tailwind.js", "configs/ts.js", - "README.md" + "readme.md" ], "exports": { "./configs/formatjs": "./configs/formatjs.js", diff --git a/README.md b/readme.md similarity index 100% rename from README.md rename to readme.md