# @volue/eslint-config

> Volue ESLint config presets

Latest version **1.3.12** (published 2025-11-03) · MIT license · 0 weekly downloads

## Install

```sh
npm install @volue/eslint-config
pnpm add @volue/eslint-config
yarn add @volue/eslint-config
bun add @volue/eslint-config
```

## Health

**Score 60/100 (C)** — status: stable.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 1.3.12 |
| Published | 2025-11-03 |
| First published | 2025-01-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=20 |
| Dependencies | 18 |
| Unpacked size | 103 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Filip Malinowski <filip.malinowski@volue.com> |
| Maintainers | fima1, it.management |
| Keywords | eslint, eslintconfig |

## Links

- npm: https://www.npmjs.com/package/@volue/eslint-config
- Repository: https://github.com/volue/eslint-config.git
- npm.io page: https://npm.io/package/@volue/eslint-config

## Dependencies (18)

- [globals](https://npm.io/package/globals.md) 15.15.0
- [neostandard](https://npm.io/package/neostandard.md) 0.12.2
- [typescript-eslint](https://npm.io/package/typescript-eslint.md) 8.46.2
- [eslint-plugin-jest](https://npm.io/package/eslint-plugin-jest.md) 29.0.1
- [eslint-plugin-react](https://npm.io/package/eslint-plugin-react.md) 7.37.5
- [@vitest/eslint-plugin](https://npm.io/package/@vitest/eslint-plugin.md) 1.4.0
- [eslint-config-prettier](https://npm.io/package/eslint-config-prettier.md) 10.0.3
- [eslint-plugin-import-x](https://npm.io/package/eslint-plugin-import-x.md) 4.16.1
- [eslint-plugin-jest-dom](https://npm.io/package/eslint-plugin-jest-dom.md) 5.5.0
- [eslint-plugin-prettier](https://npm.io/package/eslint-plugin-prettier.md) 5.2.5
- [@typescript-eslint/utils](https://npm.io/package/@typescript-eslint/utils.md) 8.46.2
- [eslint-plugin-playwright](https://npm.io/package/eslint-plugin-playwright.md) 2.3.0
- [@typescript-eslint/parser](https://npm.io/package/@typescript-eslint/parser.md) 8.46.2
- [eslint-plugin-css-modules](https://npm.io/package/eslint-plugin-css-modules.md) 2.12.0
- [eslint-plugin-react-hooks](https://npm.io/package/eslint-plugin-react-hooks.md) 7.0.1
- [eslint-config-flat-gitignore](https://npm.io/package/eslint-config-flat-gitignore.md) 1.0.1
- [eslint-plugin-testing-library](https://npm.io/package/eslint-plugin-testing-library.md) 7.13.3
- [eslint-import-resolver-typescript](https://npm.io/package/eslint-import-resolver-typescript.md) 4.4.4

## Alternatives

- [eslint-plugin-sonarjs](https://npm.io/package/eslint-plugin-sonarjs.md) — 2.9M weekly downloads
- [eslint-config-expo](https://npm.io/package/eslint-config-expo.md) — 1.5M weekly downloads
- [@matter/protocol](https://npm.io/package/@matter/protocol.md) — 63.5K weekly downloads
- [@eventcatalog/linter](https://npm.io/package/@eventcatalog/linter.md) — 24.8K weekly downloads
- [@inrupt/eslint-config-base](https://npm.io/package/@inrupt/eslint-config-base.md) — 4.5K weekly downloads

## Recent versions

- 1.3.12 (latest) — 2025-11-03
- 1.3.12-rc.4 (next) — 2025-11-03
- 1.3.12-rc.3 — 2025-11-03
- 1.3.12-rc.2 — 2025-11-03
- 1.3.12-rc.1 — 2025-11-03
- 1.3.12-rc.0 — 2025-11-03
- 1.3.11 — 2025-01-28
- 1.3.10 — 2025-01-26
- 1.3.9 — 2025-01-25
- 1.3.8 — 2025-01-18
- 1.3.7 — 2025-01-17
- 1.3.6 — 2025-01-13
- 1.3.6-rc.0 — 2025-01-13
- 1.3.5 — 2025-01-13
- 1.3.5-rc.2 — 2025-01-13
- … 23 more at https://npm.io/package/@volue/eslint-config/versions

## README

# @volue/eslint-config

[![npm version](https://img.shields.io/npm/v/@volue/eslint-config.svg)](https://www.npmjs.com/package/@volue/eslint-config)
[![neostandard javascript style](https://img.shields.io/badge/code_style-neostandard-7fffff?labelColor=ff80ff)](https://github.com/neostandard/neostandard)
[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier)
[![Continuous Integration](https://github.com/Volue/eslint-config/actions/workflows/ci.yml/badge.svg)](https://github.com/Volue/eslint-config/actions/workflows/ci.yml)
[![Release](https://github.com/Volue/eslint-config/actions/workflows/release.yml/badge.svg)](https://github.com/Volue/eslint-config/actions/workflows/release.yml)

🔍 Sharable [ESLint](https://eslint.org/) configuration presets for usage across Volue projects.

> [!NOTE]
> This package utilizes EsLint's "flat config" format, not the legacy "eslintrc" format and is only compatible with ESLint v9+.

## Features

- Comprehensive set of ESLint rules based on best practices
- Automatic management of ESLint plugins
- [Prettier](https://prettier.io/) for code formatting
- Simplified setup process
- Consistent code style across projects

## Usage

Install as a dev dependency alongside ESLint and Prettier:

```sh
yarn add -D @volue/eslint-config
yarn add -D eslint prettier
```

or

```sh
npm install -D # etc ...
```

Add an `eslint.config.js` and set up ESLint with relevant [presets documented below](#presets). Import presets you are interested in, spreading them into your config:

```js
// eslint.config.js
import {
  base,
  imports,
  typescript,
  react,
  vitest,
  testingLibrary
} from '@volue/eslint-config';

/** @type {import("eslint").Linter.Config[]} */
export default [
  ...base,
  ...imports,
  ...typescript,
  ...react,
  ...vitest,
  ...testingLibrary
];
```

### CommonJS

If your project is CommonJS, no problem, you can use this package as CommonJS just fine!

<details>
<summary>CJS config</summary>
<br>

```js
// eslint.config.js
const {
  base,
  imports,
  typescript,
  react,
  vitest,
  testingLibrary
} = require('@volue/eslint-config');

/** @type {import("eslint").Linter.Config[]} */
module.exports = [
  ...base,
  ...imports,
  ...typescript,
  ...react,
  ...vitest,
  ...testingLibrary
];
```

</details>

### Typescript

Latest versions of ESLint [support TypeScript configuration files natively](https://eslint.org/docs/latest/use/configure/configuration-files#typescript-configuration-files). You can use `eslint.config.ts` instead of `eslint.config.js`:

<details>
<summary>TS config</summary>
<br>

```ts
// eslint.config.ts
import type { Linter } from 'eslint';
import {
  base,
  imports,
  typescript,
  react,
  vitest,
  testingLibrary
} from '@volue/eslint-config';

export default [
  ...common,
  ...modules,
  ...node,
  ...stylistic,
  ...typescript,
  ...ignores
];

export default [
  ...base,
  ...imports,
  ...typescript,
  ...react,
  ...vitest,
  ...testingLibrary
] satisfies Linter.Config[];
```

</details>

## Presets

Each environment has its own preset configuration that can be easily applied in your project.

- `base` – A set of [base rules](./src/configs/neostandard.ts) that extend the [neostandard](https://github.com/neostandard/neostandard?tab=readme-ov-file) base config. Includes [prettier rules](./src/configs/prettier.ts) for code formatting and common [ignore patterns](./src/configs/ignores.ts) like `dist`, `node_modules` and files in `.gitignore`.
- [`imports`](./src/configs/imports.ts) – Enables rules for formatting and ordering imports.
- [`typescript`](./src/configs/typescript.ts) – For usage with [TypeScript](https://www.typescriptlang.org).
- [`react`](./src/configs/react.ts) – For usage with [React](https://react.dev/).
- [`jest`](./src/configs/jest.ts) – For usage with [Jest](https://jestjs.io/).testing framework
- [`vitest`](./src/configs/vitest.ts) – For usage with [Vitest](https://vitest.dev/) testing framework.
- [`testing-library`](./src/configs/testing-library.ts) – For usage with [Testing Library](https://testing-library.com/).
- [`playwright`](./src/configs/playwright.ts) – For usage with [Playwright](https://playwright.dev/).

## Prettier config

Since `base` preset integrates [Prettier](https://prettier.io/) as a rule, this package also provides shared Prettier configuration.

Create a `prettier.config.js` file that re-exports the configuration object from `@volue/eslint-config/prettier-config` entry point:

```js
// prettier.config.js
export { default } from '@volue/eslint-config/prettier-config';
```

<details>
<summary>CommonJS config</summary>
<br>

```js
// prettier.config.js
module.exports = require('@volue/eslint-config/prettier-config');
```

</details>

Alternatively, you can add the `prettier` key in your `package.json` like so:

```diff
+  "prettier": "@volue/eslint-config/prettier-config",
```

For all the possible options, please refer to the [Prettier documentation](https://prettier.io/docs/en/configuration.html).

## Customization

You can extend or override the settings from `@volue/eslint-config` per your project's needs by editing the `eslint.config.js` file. Learn more about configuring ESLint on the [ESLint website](https://eslint.org/docs/latest/use/configure/).

```js
// eslint.config.js
import { base, imports, react, typescript } from '@volue/eslint-config';
import reactRefreshPlugin from 'eslint-plugin-react-refresh';

/** @type {import("eslint").Linter.Config[]} */
export default [
  ...base,
  ...imports,
  ...react,
  ...typescript,
  // your modifications here
  {
    rules: {
      'no-undef': 'off'
    }
  },
  // additional, per-project custom plugins and rules
  {
    files: ['**/*.{ts,tsx}'],
    plugins: {
      'react-refresh': reactRefreshPlugin
    },
    rules: {
      'react-refresh/only-export-components': [
        'warn',
        { allowConstantExport: true }
      ]
    }
  },
  // extend what is ignored
  {
    ignores: ['**/*.mjs']
  }
];
```

## Additional setup

### Package scripts

It's a common practice to add linting and formatting scripts to your `package.json` for convenience:

```jsonc
// package.json
{
  "scripts": {
    "lint:js+ts": "eslint .",
    "lint:fix:js+ts": "eslint . --fix",
    "lint:format": "prettier \"**/*.{html,css,json,md,yml}\" --check",
    "lint:fix:format": "prettier \"**/*.{html,css,json,md,yml}\" --write --log-level=warn"
  }
}
```

Note that you can still use Prettier to format files that are not supported well by ESLint such as `.css`, `.html`, `.yml` etc.

### VS Code integration

Make sure you have the [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) and [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) extensions installed in your Visual Studio Code.

It's a good idea to recommend installing these extensions via the `.vscode/extensions.json` file in your project.

<details>
<summary><code>.vscode/extensions.json</code></summary>
<br>

```json
{
  "recommendations": ["dbaeumer.vscode-eslint", "esbenp.prettier-vscode"]
}
```

</details>

Then create a `.vscode/settings.json` file in your project with the following contents to enable full formatting and fixing on save:

```jsonc
{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  // turn it off for `js` and `ts(x)`, we will do this via ESLint
  "[javascript][typescript][typescriptreact]": {
    "editor.formatOnSave": false
  },
  // tell the ESLint plugin to run on save
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  }
}
```

### Git hooks

You can use [Lefthook](https://github.com/evilmartians/lefthook), a fast, cross-platform hook manager to run ESLint and Prettier on staged files before committing.

Install Lefthook:

```sh
yarn add -D lefthook
```

Add a file named `.lefthook.json` at the root of your Git repository.

<details>
<summary><code>Format and lint before committing example</code></summary>
<br>

```jsonc
// .lefthook.json
{
  "$schema": "https://json.schemastore.org/lefthook.json",
  "pre-commit": {
    "parallel": true,
    "commands": {
      "lint": {
        "glob": "*.{js,ts,tsx}",
        "run": "yarn eslint --fix {staged_files}",
        "stage_fixed": true
      },
      "format": {
        "glob": "*.{html,css,json,md,yml}",
        "run": "yarn prettier --write {staged_files}",
        "stage_fixed": true
      }
    }
  }
}
```

</details>

## Contributing

Contributions are welcome! Please check out the [issues](https://github.com/Volue/eslint-config/issues) or submit a pull request.

## 👀 In the wild

Here's a subset of some projects that rely on `@volue/eslint-config`:

- [`wave`](https://github.com/volue/wave)
- [`wave-vite-example`](https://github.com/Volue/wave-vite-example)
- [`energy-auction-bidding`](https://github.com/Volue/energy-auction-bidding)

---
_Source: https://npm.io/package/@volue/eslint-config · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._