Getting Started

Use WithESLint to make managing ESLint configurations for your project easier. This guide will assist you in getting started with your project.

Installation

pnpm add -D eslint witheslint

yarn add -D eslint witheslint

npm install -D eslint witheslint

Configuration

Directory.vscode
- settings.json
…
eslint.config.mjs
lefthook.yaml
package.json

Define ESLint configurations:
eslint.config.mjs
```
import { defineConfig } from 'witheslint'

export default defineConfig()
```
see customization for more details.

Provide convenient ESLint command line operations:

{
  "scripts": {
    "lint": "eslint",
    "lint:fix": "eslint --fix"
  }
}

Format and lint the staged files before committing or pushing:

pnpm add -D lefthook

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

Once configured, run lefthook install to set up the hooks.

Needs IDE support? Let’s configure your editor:

VS Code

Install VS Code extension:

VS Code ESLint extension

Add the following settings to your project setting:

{
  // Disable the default formatter, use eslint instead
  "prettier.enable": false,
  "editor.formatOnSave": false,

  // Auto fix
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit",
    "source.organizeImports": "never"
  },

  // Enable the ESlint flat config support
  "eslint.useFlatConfig": true,
  "eslint.runtime": "node",

  // Enable eslint for supported languages
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    // "astro",
    // "svelte",
    // "vue",
  ]
}

JetBrains IDEs

Open the Settings dialog
Go to Languages & Frameworks -> JavaScript -> Code Quality Tools -> ESLint
Select the Run eslint --fix on save checkbox.

Enjoy!