@szum-tech/eslint-config

A shared configuration is an NPM package that exports a configuration as an array. It's super convenient for anyone to use, because the configuration dynamically adapts to the needs of the project.

✨ Ready for ESLint v10! This configuration uses the modern flat config format and is compatible with ESLint v9.x. Full ESLint v10 support will be added once the ecosystem plugins (especially typescript-eslint) release compatible versions.

📚 Features

• ESLint v9 - Latest stable version with full plugin ecosystem support (ready for v10 migration)
• Flat Config Format - Uses the modern eslint.config.js format (legacy .eslintrc is not supported)
• Auto-detection - Automatically enables plugins based on your project dependencies
• Opinionated code formatter with support for: JavaScript, TypeScript, JSX, ...
• Support linting of ES2015+ (ES6+) import/export syntax, and prevent issues with misspelling of file paths and import names
• TypeScript support - only if typescript is used in project
• React & React Hooks specific linting rules - only if react is used in project
• Tailwindcss specific linting rules - only if tailwindcss is used in project
• Next.js specific linting rules - only if next is used in project
• Tests specific linting rules - only if @testing-library/dom is used in project
• Tests with jest-dom specific linting rules - only if @testing-library/jest-dom is used in project
• Vitest specific linting rules - only if vitest is used in project
• Playwright specific linting rules - only if @playwright/test is used in project
• Storybook specific linting rules - only if storybook is used in project

📖 Table of Contents

• @szum-tech/eslint-config
  • 📚 Features
  • 📖 Table of Contents
  • 🎯 Getting Started
    • ⚙️ Installation
    • Configuration
  • 💻 Scripts
  • 🚀 Minimal GitHub ESlint check workflow
  • 🛠️ Developer Info
    • Dependencies
  • 📒 Changelog
  • 📜 License

🎯 Getting Started

⚙️ Installation

@szum-tech/eslint-config is available as npm package.

Requirements:

• ESLint v9.0.0 or higher
• Node.js v20.x+ / v22.x+ / v24.x+

# NPM
npm install --save-dev eslint@latest @szum-tech/eslint-config

# YARN
yarn add -D eslint@latest @szum-tech/eslint-config

# PNPM
pnpm add --save-dev eslint@latest @szum-tech/eslint-config

# BUN
bun add --dev eslint@latest @szum-tech/eslint-config

Configuration

This package uses the ESLint Flat Config format introduced in ESLint v9 and required in ESLint v10. The legacy .eslintrc format is not supported.

A @szum-tech/eslint-config is an npm package that exports a configuration array that automatically adapts to your project's dependencies.

Configuration file: eslint.config.(js|cjs|mjs)

Simple Usage

Export the entire configuration as-is:

// eslint.config.mjs
export { default } from "@szum-tech/eslint-config";

Extended Configuration

@szum-tech/eslint-config is flexible enough to allow for configuration extensions. Use the spread operator to insert the configuration into your array:

// eslint.config.mjs
import szumTechEslintConfig from "@szum-tech/eslint-config";

export default [
  ...szumTechEslintConfig,

  // Your custom modifications
  {
    rules: {
      "no-unused-vars": "warn"
    }
  }
];

CommonJS Format

For projects using CommonJS:

// eslint.config.cjs
const szumTechEslintConfig = require("@szum-tech/eslint-config");

module.exports = [
  ...szumTechEslintConfig,

  // Your custom modifications
  {
    rules: {
      "no-unused-vars": "warn"
    }
  }
];

Note: The configuration automatically detects which libraries are installed in your project (React, TypeScript, Next.js, Vitest, etc.) and enables the appropriate ESLint plugins and rules.

💻 Scripts

Suggested scripts you can add to package.json file:

{
  "scripts": {
    "lint": "eslint .",
    "lint:ci": "eslint . -o eslint-results.sarif -f @microsoft/eslint-formatter-sarif",
    "lint:fix": "eslint . --fix",
    "lint:inspect": "npx @eslint/config-inspector@latest"
  }
}

Scripts description:

• lint: Lints the code using ESLint
• lint:ci: Lints the code using ESLint for CI - uses a @microsoft/eslint-formatter-sarif output format for report generation
• lint:fix: Automatically fixes linting errors
• lint:inspect: Launches a visual representation of the ESLint configuration file (check http://localhost:7777 in your browser). Allows you to navigate through the rules, plugins, and language configurations that are enabled or disabled

🚀 Minimal GitHub ESLint check workflow

Here are the minimal steps required to run an ESLint check. Creating or adding any content to a PR will trigger this event. Not only will this action validate the code and return its results, but it will also add highlighted parts of the code that have an error to the comments under the PR thanks to the Upload ESLint results to GitHub step, which uses github/codeql-action/upload-sarif.

name: PR Checks ✅

on:
  pull_request:

jobs:
  lint:
    name: ESLint ⬣
    runs-on: ${{ matrix.os }}
    strategy:
      matrix:
        node-version: [24.x] # Use Node.js 20+, 22+, or 24+
        os: [ubuntu-latest]
    steps:
      - name: Checkout code 📚
        uses: actions/checkout@v4
      - name: Set up Node 🟢
        uses: actions/setup-node@v4
        with:
          node-version: ${{ matrix.node-version }}
          cache: "npm"
      - name: Install dependencies ⚙️
        run: npm ci
      - name: ESLint Check ⬣
        run: npm run lint:ci
        continue-on-error: true
      - name: Upload ESLint results to GitHub
        uses: github/codeql-action/upload-sarif@v3
        with:
          sarif_file: eslint-results.sarif
          wait-for-processing: true

🛠️ Developer Info

Dependencies

📒 Changelog

The changelog is regularly updated to reflect what's changed in each new release.

📜 License

This project is licensed under the terms of the MIT license.