@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)

# Add ESLint scaffold (no installation needed!)
npx scaffit add eslint

Alternative: Global Installation

# Install CLI globally
npm install -g scaffit

# Add ESLint scaffold
scaffit add eslint

Option 2: Direct npm package usage

# 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:

# 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:

{
  "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:

{
  "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:

{
  "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

npm run lint

Fix linting issues

npm run lint:fix

Lint specific files

npx eslint src/**/*.{js,ts,jsx,tsx}

VS Code Integration

Add to your VS Code settings.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