@volue/eslint-config

@volue/eslint-config

🔍 Sharable ESLint configuration presets for usage across Volue projects.

[!NOTE] This package utilizes EsLint's "flat onfig" 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 for code formatting
• Simplified setup process
• Consistent code style across projects

Usage

Install as a dev dependency alongside ESLint and Prettier:

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

or

npm install -D # etc ...

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

// 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!

CJS config

// 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
];

Typescript

Latest versions of ESLint support TypeScript configuration files natively. You can use eslint.config.ts instead of eslint.config.js:

TS config

// 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[];

Presets

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

• base – A set of base rules that extend the neostandard base config. Includes prettier rules for code formatting and common ignore patterns like dist, node_modules and files in .gitignore.
• imports – Enables rules for formatting and ordering imports.
• typescript – For usage with TypeScript.
• react – For usage with React.
• jest – For usage with Jest.testing framework
• vitest – For usage with Vitest testing framework.
• testing-library – For usage with Testing Library.
• playwright – For usage with Playwright.

Prettier config

Since base preset integrates Prettier 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:

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

CommonJS config

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

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

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

For all the possible options, please refer to the Prettier documentation.

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.

// 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:

// 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 and Prettier 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.

.vscode/extensions.json

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

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

{
  "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, a fast, cross-platform hook manager to run ESLint and Prettier on staged files before committing.

Install Lefthook:

yarn add -D lefthook

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

Format and lint before committing example

// .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
      }
    }
  }
}

Contributing

Contributions are welcome! Please check out the issues or submit a pull request.

👀 In the wild

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

• wave
• wave-vite-example
• energy-auction-bidding