eslint-plugin-custom-angular/README.md

Custom plugin with fix and suggestions added to some rules of @angular-eslint/eslint-plugin

# ESLint Plugin Custom Angular

A custom ESLint plugin that extends `@angular-eslint/eslint-plugin@19.3.0` with additional fixes, and suggestions for Angular applications.

## 🚀 Features

- **Enhanced Angular Rules**: Custom rules built on top of `@angular-eslint`
- **Automatic Fixes**: Many rules include automatic code fixes
- **Smart Suggestions**: Intelligent suggestions for code improvements
- **TypeScript Support**: Full TypeScript support with proper type checking

## 📦 Installation

```bash
npm install eslint-plugin-custom-angular --save-dev
```

## 🔧 Configuration

Add the plugin to your ESLint configuration:

```javascript
// eslint.config.js
const eslint = require("@eslint/js");
const tseslint = require("typescript-eslint");
const custom = require("eslint-plugin-custom-angular");

module.exports = tseslint.config({
  files: [ "**/*.ts" ],
  plugins: { "custom-angular": custom },
  extends: [ eslint.configs.recommended, ...tseslint.configs.recommended ],
  rules: {
    // Enable all rules
    "custom-angular/component-max-inline-declarations": "error",
    "custom-angular/no-duplicates-in-metadata-arrays": "error",
    "custom-angular/relative-url-prefix": "error",
    "custom-angular/sort-lifecycle-methods": "error"
  }
});
```

## 📋 Available Rules

### `component-max-inline-declarations`

Enforces a maximum number of lines in inline animations. Automatically extracts long inline declarations to separate variables. If reuse the array destructuring it into inline animations array will have suggestions.

**Options:**
- `animations` (number): Maximum lines allowed for animations (default: 15)

**Example:**
```typescript
// ❌ Too many lines
@Component({
  animations: [
    trigger('dialogContainer', [
      transition('* => void', query('@transformPanel', [animateChild()], {optional: true}))
    ]),
    // ... more animations
  ]
})

// ✅ Automatically fixed to
const myAnimations: unknown[] = [
  trigger('dialogContainer', [
    transition('* => void', query('@transformPanel', [animateChild()], {optional: true}))
  ]),
  // ... more animations
];

@Component({
  animations: myAnimations
})
```

### `no-duplicates-in-metadata-arrays`

Ensures that metadata arrays do not contain duplicate entries. Automatically removes duplicates.

**Example:**
```typescript
// ❌ Duplicate entries
@NgModule({
  imports: [CommonModule, CommonModule, RouterModule],
  declarations: [AppComponent, AppComponent]
})

// ✅ Automatically fixed to
@NgModule({
  imports: [CommonModule, RouterModule],
  declarations: [AppComponent]
})
```

### `relative-url-prefix`

Enforces the use of `./` and `../` prefixes for relative URLs in Angular components.

**Example:**
```typescript
// ❌ Missing relative prefix
@Component({
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css']
})

// ✅ Automatically fixed to
@Component({
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
```

### `sort-lifecycle-methods`

Ensures that lifecycle methods are declared in order of execution. Automatically reorders methods.

**Example:**
```typescript
// ❌ Incorrect order
export class AppComponent {
  ngOnInit() { }
  constructor() { }
  ngOnDestroy() { }
}

// ✅ Automatically fixed to
export class AppComponent {
  constructor() { }
  ngOnInit() { }
  ngOnDestroy() { }
}
```

### Available Scripts

- `npm run build` - Build the plugin
- `npm run tests` - Run all tests with coverage
- `npm run serve-coverage` - Serve coverage report locally
- `npm run deploy` - Build and publish to npm

### Testing

Run tests for all rules:
```bash
npm run tests
```

### Coverage

>[!warning]
> python3 is required

View coverage report:
```bash
npm run serve-coverage
```

Then open `http://localhost:8000` in your browser.

## 🤝 Acknowledgments

- Built on top of [@angular-eslint](https://github.com/angular-eslint/angular-eslint)
- Inspired by Angular's official style guide
- Developed as part of a Final Degree Project (TFG)