Linting > eslint-config-angular-strict

Modern ESLint configuration with strict rules for Angular development.

Package 5 stars GitHub

Angular Strict ESLint Logo

Angular Strict ESLint

Modern ESLint configuration with strict rules for Angular development

Overview

A production-ready, opinionated ESLint configuration that enforces best practices for Angular applications. Combines rules from industry-leading plugins into a single package with zero additional configuration required.

Features

🅰️ Angular: 40+ rules for standalone, lifecycle, components/directives standards, metadata, signals, pipes,...
📘 TypeScript: Promise-async, type imports, strict typing, type safety, extraneous classes,...
✨ Code Quality: Complexity max, file length control, import cycles detection, 100+ Unicorn best practices,...
🎨 Style: Airbnb extended, max line length, object/class newlines, sorted classes/imports/objects/types,...
🔍 Templates: 30+ rules with alphabetical attrs, complexity max, control flow, trackBy, a11y, no-any,...

What's Included

✨ No additional ESLint installation needed! Everything is bundled.

🎩 Airbnb Extended - Airbnb style guide
🅰️ Angular ESLint - Angular-specific rules
⚙️ ESLint - Core linting engine
📦 Import-X - Import/export validation and cycle detection
💅 Perfectionist - Take Your Code to a Beauty Salon
🎨 Stylistic - Code formatting rules
📘 TypeScript ESLint - TypeScript linting
🦄 Unicorn - More than 100 powerful ESLint rules

Installation

1. Install Package

yarn add eslint-config-angular-strict --dev

⚠️ Important: Remove any existing eslint dependency from your project - it's included!

2. Configure ESLint

Create an eslint.config.js file (flat config format):

import angularStrict from 'eslint-config-angular-strict';

export default [
  ...angularStrict,
  // Your custom overrides here
];

3. Update package.json

Add the following to your package.json:

{
  // ...
  "type": "module"
}

TypeScript Configuration

Make sure your tsconfig.json is properly configured:

{
  "compilerOptions": {
    // ...
    "allowUnusedLabels": false,
    "exactOptionalPropertyTypes": true,
    "noImplicitOverride": true,
    "noUncheckedIndexedAccess": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "strict": true
  },
  "angularCompilerOptions": {
    "strictInjectionParameters": true,
    "strictStandalone": true,
    "strictTemplates": true
  }
}

Prettier

This config handles TypeScript formatting via ESLint. Prettier should only be used for HTML templates.

Recommended `.prettierrc`

{
  "printWidth": 165,
  "singleQuote": true,
  "overrides": [
    {
      "files": "*.html",
      "options": { "parser": "angular" }
    }
  ]
}

Recommended lint scripts (`package.json`)

{
  "scripts": {
    // ...
    "lint": "ng lint && prettier --check \"src/**/*.html\"",
    "lint:fix": "ng lint --fix && prettier --write \"src/**/*.html\""
  }
}

⚠️ Important: Only target *.html files with Prettier. Running Prettier on .ts files will conflict with ESLint Stylistic rules.

Recommended VS Code settings

{
  "[html]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
  "editor.defaultFormatter": "dbaeumer.vscode-eslint",
  "editor.formatOnSave": true,
  "editor.formatOnType": true,
  "eslint.format.enable": true,
  "eslint.validate": [ /*...*/, "html", "typescript"],
}

This ensures ESLint handles .ts formatting on save, while Prettier handles .html templates.

Contributing

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

License

Back to Angular