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,...
๐ **Naming**: File/folder/class suffix conventions enforced (components, services, pipes, interfaces,...)
๐ **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**](https://github.com/nishargshah/eslint-config-airbnb-extended) - Airbnb style guide
- ๐
ฐ๏ธ [**Angular ESLint**](https://github.com/angular-eslint/angular-eslint) - Angular-specific rules
- โ๏ธ [**ESLint**](https://github.com/eslint/eslint) - Core linting engine
- ๐ฆ [**Import-X**](https://github.com/un-ts/eslint-plugin-import-x) - Import/export validation and cycle detection
- ๐๏ธ [**JSON**](https://github.com/eslint/json) - JSON files parsing and linting
- ๐ [**Markdown**](https://github.com/eslint/markdown) - Markdown files parsing and linting
- ๐
[**Perfectionist**](https://github.com/azat-io/eslint-plugin-perfectionist) - Take Your Code to a Beauty Salon
- ๐จ [**Stylistic**](https://github.com/eslint-stylistic/eslint-stylistic) - Code formatting rules
- ๐งพ [**TOML**](https://github.com/ota-meshi/eslint-plugin-toml) - TOML files parsing and linting
- ๐ [**TypeScript ESLint**](https://github.com/typescript-eslint/typescript-eslint) - TypeScript linting
- ๐ฆ [**Unicorn**](https://github.com/sindresorhus/eslint-plugin-unicorn) - More than 100 powerful ESLint rules
- ๐ [**YAML**](https://github.com/ota-meshi/eslint-plugin-yml) - YAML files parsing and linting
## Installation
### 1. Install Package
```sh
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):
```javascript
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`:
```jsonc
{
// ...
"type": "module",
}
```
### 4. Lint JSON, Markdown, TOML and YAML files (optional)
JSON, Markdown, TOML and YAML files are checked against the preset of their plugin (`recommended` for JSON and Markdown, `standard` for TOML and YAML) and the Unicorn rules recommended for them, but `ng lint` only looks at the patterns declared in `angular.json`. Add the ones you need there โ files ignored by git are skipped:
```jsonc
{
// ...
"lint": {
"builder": "@angular-eslint/builder:lint",
"options": {
"lintFilePatterns": ["src/**/*.ts", "src/**/*.html", "**/*.json", "**/*.md", "**/*.toml", "**/*.yaml", "**/*.yml"],
},
},
}
```
## TypeScript Configuration
Make sure your `tsconfig.json` is properly configured:
```jsonc
{
"compilerOptions": {
// ...
"allowUnreachableCode": false,
"allowUnusedLabels": false,
"exactOptionalPropertyTypes": true,
"noImplicitOverride": true,
"noUncheckedIndexedAccess": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"target": "esnext",
},
"angularCompilerOptions": {
// ...
"extendedDiagnostics": { "defaultCategory": "error" },
"strictInjectionParameters": true,
"strictStandalone": true,
"strictTemplates": true,
},
}
```
> **โน๏ธ Note**: `target: "esnext"` auto-includes the latest standard lib (esnext + DOM), which several Unicorn rules require. Without it, some rules may suggest APIs that TypeScript doesn't recognize as built-in. No need to set `lib` explicitly โ TypeScript infers it from `target`.
## Prettier
This config handles **TypeScript formatting via ESLint**. Prettier should only be used for **HTML templates**.
### Recommended `.prettierrc`
```json
{
"printWidth": 165,
"singleQuote": true,
"overrides": [
{
"files": "*.html",
"options": { "parser": "angular" }
}
]
}
```
### Recommended lint scripts (`package.json`)
```jsonc
{
"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
```jsonc
{
// ...
"[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
MIT ยฉ [Jean-benoit Gautier](https://github.com/Jbz797)