eslint-config-dzrv

A comprehensive, opinionated ESLint configuration for modern full-stack TypeScript projects. Supports React frontends, Node.js backends, and everything in between.

Features

✨ ESLint v9 compatible (flat config format)
🎯 Full-stack support - Frontend (React) + Backend (Node.js)
📘 TypeScript first - Full TypeScript support with type-aware linting
🔒 Security focused - Built-in security rules
♿ Accessibility - JSX-A11Y rules for React components
🎨 Prettier compatible - No conflicts with Prettier formatting
📦 Zero config - Sensible defaults, customize as needed
🔧 Modular - Use only what you need

Installation

npm install --save-dev eslint-config-dzrv eslint@^9

Usage

Quick Start

Create an eslint.config.js file in your project root:

import fullstack from 'eslint-config-dzrv';

// Use the recommended fullstack preset
export default fullstack.configs['recommended-fullstack'];

Available Presets

Recommended Presets (Most Common)

import fullstack from 'eslint-config-dzrv';

// Full-stack TypeScript + React + Node.js
export default fullstack.configs['recommended-fullstack'];

// Frontend only (React + TypeScript)
export default fullstack.configs['recommended-react-typescript'];

// Backend only (Node.js + TypeScript)
export default fullstack.configs['recommended-node-typescript'];

// Basic JavaScript (no frameworks)
export default fullstack.configs['recommended'];

Individual Configurations

For more control, compose your own configuration:

import fullstack from 'eslint-config-dzrv';

export default [
  fullstack.configs.ignores,
  fullstack.configs.base,
  fullstack.configs.typescript,
  fullstack.configs.react,
  fullstack.configs.node,
  fullstack.configs.prettier,
  
  // Your custom overrides
  {
    rules: {
      'no-console': 'off',
    },
  },
];

Configuration Examples

Monorepo with Frontend and Backend

import fullstack from 'eslint-config-dzrv';

export default [
  ...fullstack.configs['recommended-fullstack'],
  
  // Backend-specific overrides
  {
    files: ['backend/**/*.ts', 'server/**/*.ts', 'api/**/*.ts'],
    rules: {
      'no-console': 'off',
    },
  },
  
  // Frontend-specific overrides
  {
    files: ['frontend/**/*.tsx', 'src/**/*.tsx', 'components/**/*.tsx'],
    rules: {
      'react/prop-types': 'off',
    },
  },
];

React-only Project

import fullstack from 'eslint-config-dzrv';

export default [
  ...fullstack.configs['recommended-react-typescript'],
  
  {
    rules: {
      'react-hooks/exhaustive-deps': 'error', // Stricter hook deps
    },
  },
];

Node.js API Server

import fullstack from 'eslint-config-dzrv';

export default [
  ...fullstack.configs['recommended-node-typescript'],
  
  {
    rules: {
      'complexity': ['warn', 25], // Allow more complexity in API routes
    },
  },
];

Configuration Modules

Base Config

Core JavaScript/ES2021+ rules including:

• Import ordering and organization
• Unused import detection
• Security checks
• Best practices enforcement
• Code quality rules

TypeScript Config

TypeScript-specific rules:

• Type-safe linting
• Consistent type imports
• Promise handling
• Type inference optimization

Node.js Config

Backend-specific rules:

• Node.js API best practices
• Promise handling
• File system operations
• Process and buffer globals

React Config

Frontend React rules:

• React 17+ (no React import needed)
• Hooks linting
• JSX best practices
• Accessibility (a11y) checks

Prettier Config

Disables all rules that conflict with Prettier formatting.

Rules Philosophy

Error vs Warning

• Errors: Security issues, bugs, breaking code
• Warnings: Code quality, maintainability, conventions

Complexity Rules

• Base: complexity: 15 (general code)
• Node: complexity: 20 (backend routes can be complex)
• React: Uses base settings

Console Usage

• Frontend: warn (should use proper logging)
• Backend: off (console is acceptable)

TypeScript Support

This config requires TypeScript projects to have a tsconfig.json. The config uses projectService: true for type-aware linting.

Recommended tsconfig.json

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  }
}

Peer Dependencies

• eslint ^9.0.0

Migration from ESLint v8

ESLint v9 uses the new flat config format. Key changes:

1. Config file: .eslintrc.* → eslint.config.js
2. Format: JSON/YAML → JavaScript (ES modules)
3. Extends: String references → Direct imports

Before (v8)

{
  "extends": ["some-config"],
  "rules": {}
}

After (v9)

import someConfig from 'some-config';

export default [
  someConfig,
  {
    rules: {},
  },
];

Contributing

Contributions are welcome! Please open an issue or submit a pull request.

License

MIT © [Your Name]

Acknowledgments

Inspired by:

• @eslint/js
• eslint-config-airbnb
• eslint-config-prettier
• eslint-config-dzrv

Related Packages

• Prettier - Code formatter
• TypeScript ESLint - TypeScript support
• ESLint - Pluggable linting utility