ESLint

ESLint is a pluggable linting utility for JavaScript and TypeScript that helps identify and fix problematic patterns in your code.

Installation

npm install -D eslint

Basic Setup

Add ESLint to your Denji hooks to automatically fix linting issues after adding icons:

denji.json

{
  "output": "./src/icons.tsx",
  "framework": "react",
  "typescript": true,
  "hooks": {
    "postAdd": [
      "npx eslint --fix ./src/icons.tsx"
    ]
  }
}

Configuration Examples

Fix with Quiet Mode

Suppress warnings and only show errors:

denji.json

{
  "hooks": {
    "postAdd": [
      "npx eslint --fix --quiet ./src/icons.tsx"
    ]
  }
}

Multiple Hooks

Run ESLint after various operations:

denji.json

{
  "hooks": {
    "postAdd": [
      "npx eslint --fix ./src/icons.tsx"
    ],
    "postRemove": [
      "npx eslint --fix ./src/icons.tsx"
    ],
    "postClear": [
      "npx eslint --fix ./src/icons.tsx"
    ]
  }
}

Check Before, Fix After

Validate before adding, then fix issues:

denji.json

{
  "hooks": {
    "preAdd": [
      "npx eslint ./src/icons.tsx"
    ],
    "postAdd": [
      "npx eslint --fix ./src/icons.tsx"
    ]
  }
}

Common Commands

npx eslint --fix ./src/icons.tsx

Automatically fixes linting issues in the icons file.

npx eslint ./src/icons.tsx

Checks for issues without modifying files. Useful for CI pipelines or pre-commit hooks.

npx eslint --fix --config eslint.config.js ./src/icons.tsx

Uses a specific ESLint configuration file.

npx eslint --fix --cache --cache-location .eslintcache ./src/icons.tsx

Enables caching for faster subsequent runs.

ESLint Options

Common Flags

Flag	Description
`--fix`	Automatically fix problems
`--quiet`	Report errors only, ignore warnings
`--cache`	Store results for faster runs
`--config`	Specify config file path
`--no-error-on-unmatched-pattern`	Prevent errors when no files match

Examples with Options

denji.json

{
  "hooks": {
    "postAdd": [
      "npx eslint --fix --cache --cache-location .eslintcache ./src/icons.tsx"
    ]
  }
}

Combining with Prettier

ESLint handles code quality rules, while Prettier handles formatting:

denji.json

{
  "hooks": {
    "postAdd": [
      "npx eslint --fix ./src/icons.tsx",
      "npx prettier --write ./src/icons.tsx"
    ]
  }
}

When using ESLint with Prettier, install eslint-config-prettier to disable ESLint rules that conflict with Prettier:

npm install -D eslint-config-prettier

Then add it to your ESLint config:

eslint.config.js

import prettier from "eslint-config-prettier";

export default [
  // ... other configs
  prettier,
];

Package Manager Alternatives

{
  "hooks": {
    "postAdd": ["npx eslint --fix ./src/icons.tsx"]
  }
}

{
  "hooks": {
    "postAdd": ["pnpm exec eslint --fix ./src/icons.tsx"]
  }
}

{
  "hooks": {
    "postAdd": ["yarn exec eslint --fix ./src/icons.tsx"]
  }
}

{
  "hooks": {
    "postAdd": ["bunx eslint --fix ./src/icons.tsx"]
  }
}

Using Package Scripts

Define a script in package.json:

package.json

{
  "scripts": {
    "lint": "eslint --fix .",
    "lint:icons": "eslint --fix ./src/icons.tsx"
  }
}

Reference it in your Denji config:

denji.json

{
  "hooks": {
    "postAdd": ["npm run lint:icons"]
  }
}

Performance Tips

Use cache - Enable caching for faster linting:

"postAdd": ["npx eslint --fix --cache ./src/icons.tsx"]

Target specific file - Lint only the icons file instead of globs:
```
"postAdd": ["npx eslint --fix ./src/icons.tsx"]
```

Suppress warnings - Use --quiet to only report errors:

"postAdd": ["npx eslint --fix --quiet ./src/icons.tsx"]

Troubleshooting

ESLint Not Found

Install ESLint as a dev dependency:

npm install -D eslint

Parse Errors with TypeScript

Ensure you have TypeScript ESLint parser installed:

npm install -D @typescript-eslint/parser @typescript-eslint/eslint-plugin

Hook Fails on First Run

If the icons file doesn't exist yet, ESLint may fail. Use --no-error-on-unmatched-pattern:

{
  "hooks": {
    "postAdd": [
      "npx eslint --fix --no-error-on-unmatched-pattern ./src/icons.tsx"
    ]
  }
}

Conflicting Rules with Prettier

Install and configure eslint-config-prettier to disable conflicting rules:

npm install -D eslint-config-prettier

Prettier Integration - Code formatting
Biome Integration - All-in-one alternative
Configuration - Denji configuration options

On this page