✨ Implementing a standardized ESLint configuration across all your projects.

Features

• One-line configuration reusable across projects.
• Designed to work with JSX, TypeScript out-of-box.
• Reasonable defaults: best practices, with better code quality.
• Opinionated defaults: single quotes, no semicolons, sorted imports.
• Auto-fix formatting for consistent code style.
• Utilizes ESLint's new flat config format for easy composition.
• Support also for Astro, React, Svelte, Solid, Vue.
• Auto-completion and type-checking for ESLint rules configuration.

Usage

To get started with WithESLint, first install the package in your project:

pnpm i -D eslint witheslint

Next, in your project root, create a file named eslint.config.js or eslint.config.ts — that's where you'll define your ESLint settings go!

Depending on your project’s complexity, WithESLint can be used in several ways:

Basic

Best for: most JavaScript or TypeScript projects with zero config.

This single line gives you a fully functional ESLint setup:

import { defineConfig } from 'witheslint'

export default defineConfig()

Framework-Specific

Best for: framework-specific setups (Astro, React, Vue, etc.).

Apply framework-aware presets for better integration:

import { defineConfig, presetAstro } from 'witheslint'

export default defineConfig({
  presets: [
    presetAstro()
  ]
})

Other available presets include: presetReact, presetSvelte, presetVue, presetSolid, etc.

Advanced

Best for: complex projects that need rule customization or conditional behavior.

import { defineConfig, presetAstro } from 'witheslint'

export default defineConfig({
  // Glob patterns for files to exclude from linting
  ignores: [
    'generated/**'
  ],
  // Controls built-in preset activation
  features: {
    // typescript: false,      // Disable TypeScript even if detected
    // stylistic: 'prettier',  // Use Prettier mode
    // sorting: false          // Disable sorting rules
  },
  // Additional user-provided presets
  presets: [
    presetAstro(),
    // presetReact(),
    // presetSolid(),
    // presetSvelte(),
    // presetVue()
  ],
  // Raw ESLint configurations to append
  extends: [
    {
      name: 'custom-rules',
      rules: {
        'no-console': 'error',
      }
    }
  ]
})

That's it! You can now run ESLint in your project!

pnpm eslint .

Supports

IDE Integration

Needs IDE support? Let's configure your editor:

1. Install VS Code ESLint extension

2. Add the following settings to your project setting:

{
  "prettier.enable": false,
  "editor.formatOnSave": false,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit",
    "source.organizeImports": "never"
  },
  "eslint.runtime": "node",
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    // "astro",
    // "svelte",
    // "vue",
  ]
}

1. Open the Settings dialog

2. Go to Languages & Frameworks -> JavaScript -> Code Quality Tools -> ESLint

3. Select the Run eslint --fix on save checkbox.

Git Hooks

Format and lint the staged files before committing or pushing:

Lefthook provides a fast, cross-platform, and dependency-free hook manager.

1. Install lefthook as a dev dependency:

pnpm add -D lefthook

2. Create a lefthook.yaml file in your project root with the following content:

pre-commit:
  commands:
    eslint:
      glob: '*.{js,ts}'
      run: pnpm eslint --fix {staged_files}
      stage_fixed: true

3. Once configured, run the following command to to set up the hooks:

pnpm lefthook install

Visualizing

Launch a visual inspector for your ESLint setup and see all active rules in action:

npx @eslint/config-inspector@latest

Visit http://localhost:7777 to view and play with your ESLint config. Changes to the config file will be updated automatically.

That's it — a quick way to explore your ESLint config visually.