@maholan/eslint-config

Comprehensive ESLint configuration for TypeScript monorepo with best practices.

Features

🎯 TypeScript Master Configuration

• Strict type checking with type-aware linting
• Explicit function return types
• Consistent type imports/exports
• No floating promises or misused promises
• Prefer nullish coalescing and optional chaining

🔄 Import Pattern Protection

• Cyclic Import Prevention: Detects and prevents circular dependencies
• Import Ordering: Automatic organization of imports by type (builtin → external → internal → parent/sibling → index → type)
• No Duplicate Imports: Prevents importing the same module multiple times
• Unused Import Removal: Automatically detects and removes unused imports

📦 Barrel Export Support

• Configured to work with index.ts barrel exports
• Smart path resolution for internal packages
• Support for @ aliased imports

🎨 Prettier Integration

• Full Prettier integration with eslint-plugin-prettier
• Consistent code formatting across the monorepo
• Auto-fix on save capability

📝 Naming Conventions

• Classes: PascalCase
• Interfaces: PascalCase
• Type Aliases: PascalCase
• Enums: PascalCase
• Enum Members: UPPER_CASE
• Functions: camelCase (or PascalCase for React components)
• Variables: camelCase or UPPER_CASE (for constants)
• Parameters: camelCase (with optional leading underscore)

⚙️ Function Patterns

• Prefer arrow functions for callbacks
• Consistent function declarations
• Complexity limits (max 15)
• Function length limits (max 150 lines)

🛡️ General Best Practices

• No console.log (use logger instead)
• Require curly braces for all control statements
• Strict equality (===) required
• No var, prefer const
• Prefer template literals
• Line length limit (120 chars)
• Unix line endings

Installation

This package is already installed in your monorepo. To use it in other packages:

{
  "devDependencies": {
    "@maholan/eslint-config": "workspace:*",
    "eslint": "^8.57.0"
  }
}

Usage

Create an .eslintrc.js in your package:

module.exports = {
  root: true,
  extends: ["@maholan/eslint-config"],
  parserOptions: {
    project: "./tsconfig.json",
    tsconfigRootDir: __dirname,
  },
};

Key Rules

TypeScript Rules

• ✅ @typescript-eslint/no-explicit-any: Error - Forces explicit typing
• ✅ @typescript-eslint/explicit-function-return-type: Warn - Requires return types
• ✅ @typescript-eslint/consistent-type-imports: Error - Use type imports
• ✅ @typescript-eslint/no-floating-promises: Error - Handle promises properly
• ✅ @typescript-eslint/strict-boolean-expressions: Warn - Strict boolean checks

Import Rules

• 🔄 import/no-cycle: Error - Prevents circular dependencies
• 📦 import/order: Error - Enforces import ordering
• 🚫 import/no-default-export: Warn - Prefer named exports
• ✨ unused-imports/no-unused-imports: Error - Removes unused imports

Function Rules

• 📏 max-lines-per-function: Warn (150 lines)
• 🔢 complexity: Warn (max 15)
• ➡️ prefer-arrow-callback: Warn
• 🎯 func-style: Warn - Consistent function style

Overrides

Config Files

Default exports are allowed in:

• *.config.ts
• *.config.js
• vite.config.ts
• vitest.config.ts

Test Files

Relaxed rules for:

• **/*.test.ts
• **/*.spec.ts
• **/*.test.tsx
• **/*.spec.tsx

Example: Barrel Exports

✅ Good Pattern (with index.ts):

// components/index.ts
export { Button } from "./button";
export { Input } from "./input";
export type { ButtonProps } from "./button";
export type { InputProps } from "./input";

// In other files
import { Button, Input } from "./components";
import type { ButtonProps } from "./components";

❌ Bad Pattern (circular dependency):

// user.ts
import { Post } from "./post";

// post.ts
import { User } from "./user"; // ❌ Circular dependency!

Scripts

Add these scripts to your package.json:

{
  "scripts": {
    "lint": "eslint . --ext .ts,.tsx",
    "lint:fix": "eslint . --ext .ts,.tsx --fix",
    "format": "prettier --write \"src/**/*.{ts,tsx,json,md}\"",
    "format:check": "prettier --check \"src/**/*.{ts,tsx,json,md}\""
  }
}

VSCode Integration

Add to .vscode/settings.json:

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.organizeImports": false
  },
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ]
}

Dependencies

This config uses the following plugins:

• @typescript-eslint/eslint-plugin - TypeScript linting
• @typescript-eslint/parser - TypeScript parser
• eslint-plugin-import - Import/export validation
• eslint-plugin-unused-imports - Unused import removal
• eslint-plugin-prettier - Prettier integration
• eslint-config-prettier - Disables conflicting ESLint rules

License

MIT