@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.

📚 Features

• 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.

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

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

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

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

Configuration

Basic information needed to understand, how to set up eslint configuration, you are able to find in Configuration Files documentation.

A @szum-tech/eslint-config is an npm package that exports a configuration object or array.

@szum-tech/eslint-config could be set via either:

• A eslint.config.(js|cjs|mjs) file that exports an array

The following examples show how to integrate configuration in project:

• Via eslint.config.mjs file:

Once you use a predefined configuration, you can export the entire configuration.

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

@szum-tech/eslint-config is flexible enough to allow for configuration extensions. You’ll need to use the spread operator to insert those items into the configuration array.

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

export default [
  ...szumTechEslintConfig,

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

• Via eslint.config.cjs file:

module.exports = require("@szum-tech/semantic-release-config/with-npm");

OR, extends

const szumTechEslintConfig = require("@szum-tech/semantic-release-config/with-npm");

module.exports = [
  ...szumTechEslintConfig,

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

💻 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: [22.x]
        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.