home / skills / ehtbanton / claudeskillsrepo / eslint-config-generator

eslint-config-generator skill

safe

This skill generates production-ready ESLint configuration files for JavaScript and TypeScript projects, including modern flat config and legacy setups

npx playbooks add skill ehtbanton/claudeskillsrepo --skill eslint-config-generator

Review the files below or copy the command above to add this skill to your agents.

Files (2)

SKILL.md

1.9 KB

---
name: eslint-config-generator
description: Generate ESLint configuration files (.eslintrc.js, eslint.config.js) for JavaScript/TypeScript projects with framework-specific rules. Triggers on "create ESLint config", "generate eslint configuration", "eslint setup for", "linting rules for".
---

# ESLint Config Generator

Generate production-ready ESLint configuration files with appropriate rules, plugins, and extends for various JavaScript/TypeScript projects.

## Output Requirements

**File Output:** `.eslintrc.js`, `.eslintrc.json`, or `eslint.config.js`
**Format:** Valid ESLint configuration
**Standards:** ESLint 8.x / 9.x (flat config)

## When Invoked

Immediately generate a complete ESLint configuration file with appropriate plugins, extends, and rules for the specified project type.

## Configuration Templates

### Modern Flat Config (ESLint 9.x)
```javascript
// eslint.config.js
import js from '@eslint/js';
import typescript from '@typescript-eslint/eslint-plugin';
import typescriptParser from '@typescript-eslint/parser';

export default [
  js.configs.recommended,
  {
    files: ['**/*.{ts,tsx}'],
    languageOptions: {
      parser: typescriptParser,
      parserOptions: {
        ecmaVersion: 'latest',
        sourceType: 'module',
        project: './tsconfig.json',
      },
    },
    plugins: {
      '@typescript-eslint': typescript,
    },
    rules: {
      '@typescript-eslint/no-unused-vars': 'error',
      '@typescript-eslint/no-explicit-any': 'warn',
    },
  },
];
```

### Legacy Config
```javascript
// .eslintrc.js
module.exports = {
  root: true,
  env: { node: true, es2022: true },
  parser: '@typescript-eslint/parser',
  plugins: ['@typescript-eslint'],
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
  ],
};
```

## Example Invocations

**Prompt:** "Create ESLint config for React TypeScript"
**Output:** Complete `.eslintrc.js` with React, TypeScript, and hooks rules.

Overview

This skill generates production-ready ESLint configuration files (.eslintrc.js, .eslintrc.json, or eslint.config.js) for JavaScript and TypeScript projects. It produces framework-aware configs (React, Node, Next.js, etc.) and supports both legacy and modern flat ESLint formats for v8/v9+. The output is ready to paste or save and includes plugins, parsers, extends, and sensible rule sets.

How this skill works

On invocation it inspects the requested project type and target format (legacy .eslintrc or modern flat eslint.config.js) and emits a complete config with parserOptions, plugins, recommended extends, and tuned rules. It can include TypeScript parser/plugin setup, React and hooks rules, Node/Next specifics, and common stylistic or error-prevention rules. The generator defaults to ESLint 8/9 compatibility and flags recommended rule severities.

When to use it

Starting a new JavaScript or TypeScript project and you need a ready ESLint config
Migrating from legacy .eslintrc to ESLint flat config (eslint.config.js)
Adding framework-specific linting: React, Next.js, Node, or Vue
Enforcing TypeScript rules with @typescript-eslint parser and plugin
Creating CI lint jobs that require consistent, production-ready rules

Best practices

Choose eslint.config.js (flat) for ESLint v9 and modern toolchains; use .eslintrc.js for legacy support
Include project tsconfig.json in parserOptions.project when linting types with TypeScript
Start with recommended extends and then enable stricter rules progressively
Keep stylistic rules minimal in base config and enforce team style with a separate shareable config if needed
Run ESLint in CI and enable autofix for safe, mechanical fixes before committing

Example use cases

Generate eslint.config.js for a React + TypeScript app with react/recommended, react-hooks, and @typescript-eslint rules
Create a .eslintrc.js for a Node service using CommonJS, targeting Node 18 and enabling no-console only for production builds
Produce a flat config that scopes TypeScript rules to **/*.ts,**/*.tsx files and uses the TypeScript parser
Provide a minimal JSON config for a small JavaScript library that only needs eslint:recommended and basic stylistic rules

FAQ

Which format should I pick, .eslintrc.js or eslint.config.js?

Use eslint.config.js (flat) for ESLint v9 and modern projects; use .eslintrc.js when you need compatibility with older tooling or ESLint v8.

Does the generator include TypeScript type-aware rules?

Yes — it can add @typescript-eslint with parserOptions.project pointing at ./tsconfig.json so type-aware rules work when desired.