npm package: @scaffit/eslint
Description: ESLint configuration setup with framework-specific rules for Next.js, React, Vue, Angular, Svelte, Express, Fastify, Node.js projects
Author: Santosh Hanumaiah Ranganatha
Latest version: 1.0.4

# @scaffit/eslint

ESLint configuration setup with framework-specific rules.

## Features

- **Multi-framework support** - Next.js, React, Vue, Angular, Svelte, Express, Fastify, Node.js
- **Automatic framework detection** - Adapts configuration based on your project
- **TypeScript support** - Full TypeScript linting rules
- **Prettier integration** - Works seamlessly with Prettier
- **Customizable rules** - Choose strictness level and specific rules
- **Package.json scripts** - Add lint and lint:fix commands

## Installation

### Option 1: Using Scaffit CLI (Recommended)
```bash
# Add ESLint scaffold (no installation needed!)
npx scaffit add eslint
```

### Alternative: Global Installation
```bash
# Install CLI globally
npm install -g scaffit

# Add ESLint scaffold
scaffit add eslint
```

### Option 2: Direct npm package usage
```bash
# Install scaffold directly
npm install @scaffit/eslint

# Use in your code
import { setupESLint, previewESLint } from '@scaffit/eslint';

// Setup ESLint with custom options
const result = await setupESLint({
  includeTypeScript: true,
  includePrettier: true,
  strictnessLevel: 'recommended',
  addLintScripts: true,
  projectRoot: './my-project'
});

// Preview changes before applying
const preview = await previewESLint({
  includeTypeScript: true,
  includePrettier: true,
  strictnessLevel: 'recommended'
});
```

**Note**: Both approaches require `@scaffit/core` to be installed (automatically handled).

## Usage

After installation, you can immediately lint your code:

```bash
# Check for linting issues
npm run lint

# Auto-fix linting issues
npm run lint:fix
```

**Note**: Linting is ready to use immediately after installation.

## Configuration Options

- **TypeScript support**: Add TypeScript-specific ESLint rules
- **Prettier integration**: Configure ESLint to work with Prettier
- **Strictness level**: Choose between recommended, strict, or custom
- **Framework**: Automatically detected (Next.js, React, Vue, Angular, Svelte, Express, Fastify, Node.js)

## Generated Files

### .eslintrc.json
Framework-specific ESLint configuration:

**Next.js:**
```json
{
  "extends": [
    "next/core-web-vitals",
    "@typescript-eslint/recommended",
    "prettier"
  ],
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint"],
  "rules": {
    "@typescript-eslint/no-unused-vars": "error",
    "@typescript-eslint/no-explicit-any": "warn",
    "prefer-const": "error"
  }
}
```

**React/Vue/Angular/Svelte:**
```json
{
  "extends": [
    "eslint:recommended",
    "@typescript-eslint/recommended",
    "prettier"
  ],
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint"],
  "rules": {
    "@typescript-eslint/no-unused-vars": "error",
    "react-hooks/rules-of-hooks": "error",
    "react-hooks/exhaustive-deps": "warn"
  }
}
```

**Express/Fastify/Node.js:**
```json
{
  "extends": [
    "eslint:recommended",
    "@typescript-eslint/recommended",
    "prettier"
  ],
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint"],
  "env": {
    "node": true,
    "es2022": true
  },
  "rules": {
    "@typescript-eslint/no-unused-vars": "error",
    "no-console": "warn"
  }
}
```

### .eslintignore
Framework-specific ignore patterns:

**Next.js:**
```
node_modules
.next
out
.vercel
dist
build
coverage
*.log
*.lock
package-lock.json
yarn.lock
pnpm-lock.yaml
```

**React/Vue/Angular/Svelte:**
```
node_modules
dist
build
coverage
*.log
*.lock
package-lock.json
yarn.lock
pnpm-lock.yaml
```

**Express/Fastify/Node.js:**
```
node_modules
dist
build
coverage
*.log
*.lock
package-lock.json
yarn.lock
pnpm-lock.yaml
```

## Dependencies Added

- `eslint` - JavaScript/TypeScript linter
- `@typescript-eslint/parser` - TypeScript parser for ESLint (if TypeScript enabled)
- `@typescript-eslint/eslint-plugin` - TypeScript-specific ESLint rules (if TypeScript enabled)
- `eslint-config-prettier` - Disable ESLint rules that conflict with Prettier (if Prettier integration enabled)

## Package.json Scripts Added

- `lint` - Run ESLint on all files
- `lint:fix` - Run ESLint and fix auto-fixable issues

## Framework-Specific Features

### Next.js
- Next.js specific rules (`next/core-web-vitals`)
- React hooks rules
- Next.js best practices

### React
- React hooks rules
- JSX-specific linting
- React best practices

### Vue
- Vue-specific rules
- Template linting
- Vue composition API rules

### Angular
- Angular-specific rules
- TypeScript strict mode
- Angular best practices

### Svelte
- Svelte-specific rules
- Component linting
- Svelte best practices

### Express/Fastify/Node.js
- Node.js environment
- Server-side specific rules
- API best practices

## Usage Examples

### Run linting
```bash
npm run lint
```

### Fix linting issues
```bash
npm run lint:fix
```

### Lint specific files
```bash
npx eslint src/**/*.{js,ts,jsx,tsx}
```

### VS Code Integration

Add to your VS Code settings.json:

```json
{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.validate": [
    "javascript",
    "typescript",
    "javascriptreact",
    "typescriptreact"
  ]
}
```

## Configuration

You can customize ESLint by editing `.eslintrc.json`:

- `extends`: Base configurations to extend
- `rules`: Custom rules and their severity
- `parser`: JavaScript/TypeScript parser
- `plugins`: Additional ESLint plugins
- `env`: Environment settings

## Next Steps

1. Run `npm run lint` to check for issues
2. Run `npm run lint:fix` to fix auto-fixable issues
3. Set up your editor to show ESLint errors
4. Consider adding pre-commit hooks with lint-staged
5. Add ESLint to your CI/CD pipeline