ESLint Angular Configuration

A comprehensive ESLint configuration for Angular projects with custom rules for modern Angular development best practices.

Features

• Custom Angular Rules: Enforces modern Angular patterns and best practices
• TypeScript Support: Full TypeScript integration with strict type checking
• Angular ESLint: Official Angular ESLint plugin integration
• Modern JavaScript: ES2022+ support with latest language features

Installation

npm install --save-dev eslint-angular

Usage

Basic Configuration

Add to your .eslintrc.js or eslint.config.js:

import angularConfig from 'eslint-angular';

export default angularConfig;

With Custom Rules

import angularConfig from 'eslint-angular';

export default {
  ...angularConfig,
  rules: {
    ...angularConfig.rules,
    // Your custom rules here
  }
};

Custom Rules

This package includes several custom rules specifically designed for Angular development:

no-ngclass

• Error: Disallows ngClass usage
• Fix: Use [class] bindings instead
• Why: Modern Angular prefers property binding over structural directives

no-ngstyle

• Error: Disallows ngStyle usage
• Fix: Use [style] bindings instead
• Why: Better performance and cleaner syntax

no-signal-mutate

• Error: Disallows mutate() on signals
• Fix: Use update() or set() instead
• Why: mutate() is deprecated in favor of immutable updates

require-onpush

• Error: Requires OnPush change detection strategy
• Why: Better performance through explicit change detection control

require-input-output-func

• Error: Requires Input/Output properties to be functions
• Why: Promotes reactive programming patterns

no-standalone-true

• Error: Disallows standalone: true in components
• Why: Enforces module-based architecture

no-ngoptimizedimage-missing

• Error: Ensures NgOptimizedImage is used for images
• Why: Better image loading performance

no-host-binding-listener

• Error: Disallows host binding and listener patterns
• Why: Modern Angular prefers other approaches

Included ESLint Plugins

• @typescript-eslint: TypeScript-specific rules
• @angular-eslint: Official Angular ESLint rules
• eslint-plugin-angular: Additional Angular best practices

Key Rules

TypeScript

• Strict type checking
• No explicit any types
• Explicit return types for functions
• Const preference over let/var

Angular

• Component selector naming conventions
• Directive selector patterns
• OnPush change detection preference
• Injectable service patterns

Code Quality

• Import sorting and organization
• No duplicate imports
• Template literal preference
• Object shorthand notation

Scripts

# Build the package
npm run build

# Lint source files
npm run lint

# Lint and auto-fix
npm run lint:fix

Requirements

• ESLint 8.0+
• TypeScript 5.0+
• Angular 17.0+
• Node.js 18.0+

License

MIT