@my-ul/eslint-plugins

A set of custom eslint rules that make working with myUL projects easier.

Installation

If you are using Angular, make sure angular-eslint is installed first.

npm install --save-dev @my-ul/eslint-plugin

Rules

no-constructor-literal-initializers

has fixer

This rule disallows initializing class properties in the constructor.

Disallowed

These are examples of incorrect code.

class MyClass {
  myProperty: number;
  constructor() {
    this.myProperty = 0;
  }
}

Allowed

These are examples of correct code.

class MyClass {
  myProperty = 0;
}

Configuration

import myul from '@my-ul/eslint-plugin';
import tsParser from '@typescript-eslint/parser';

export default [
    {
        files: ['*.ts'],
        // this rules requires @typescript-eslint/parser for type checking
        languageOptions: {
            parser: tsParser,
            parserOptions: {
                project: './tsconfig.json'
            }
        },
        plugins: {
            myul
        }
        rules: {
            'myul/no-constructor-literal-initializers': ['error']
        }
    }
]

no-mismatched-fallback-labels

has fixer

This rule will ensure that uses of useTranslation hooks are using the correct fallback label.

Configuration

import myul from '@my-ul/eslint-plugin';

/***
 * The path to the default dictionary file.
 **/
const defaultDictionaryPath = 'assets/i18n/en-US.json';

/***
 * The action to take when a mismatch is found.
 * 'fix' will automatically update the fallback label.
 * 'report' will only report the issue.
 **/
const action = 'fix';
export default [
    {
        files: ['**/*.ts'],
        plugins: {
            myul
        }
        rules: {
            'myul/no-mismatched-fallback-labels': ['error', {
                defaultDictionaryPath,
                action
            }]
        }
    }
]

Disallowed

These are examples of incorrect code.

// assets/i18n/en-US.json
{
  "foo": "bar"
}

import { useTranslation } from '@my-ul/tod-angular-client';

@Component({
  selector: 'app-my-component',
  template: `
    @let i18n = translate();
    <div>{{ i18n.foo }}</div>
  `,
})
export class MyComponent {
  translate = useTranslationSignal({
    foo: 'baz', // eslint error: 'foo' does not match the fallback label 'bar'
  });
}

no-useless-rxjs-operators

has fixer

This rule detects and removes useless RxJS operators, such as an empty .pipe() or map(x => x) and throwError(e => { throw e }).

Disallowed

These are examples of incorrect code.

import { of, map, catchError } from 'rxjs';

export const myFunction = (number) =>
  of(number).pipe(
    map((x) => x),
    catchError((e) => {
      throw e;
    }),
  );

Allowed

These are examples of correct code.

import { of } from 'rxjs';

export const myFunction = (number) => of(number);

prefer-inject-function

has fixer

This rule will migrate from constructor injection to the inject(token) function.

Disallowed

These are examples of incorrect code.

import { Injectable, PLATFORM_ID } from '@angular/core';

@Injectable()
export class MyService {
  constructor(
    private dependency: Dependency,
    @Inject(PLATFORM_ID) private platformId,
  ) {}
}

Allowed

These are examples of correct code. (Note: the empty constructor should be removed by a different rule).

import { Injectable, inject } from '@angular/core';

@Injectable()
export class MyService {
  constructor() {}
  private dependency = inject(Dependency);
  private platformId = inject(PLATFORM_ID);
}

Configuration

• autoFix (default: true): Automatically fix the code. When false, the rule will only report issues and suggest fixes.

import myul from '@my-ul/eslint-plugin';

/**
 * Fix the code automatically.  False is useful for CI/CD pipeline checks.
 */
const autoFix = true;

export default [
    {
        files: ['**/*.ts'],
        plugins: {
            myul
        }
        rules: {
            'myul/prefer-inject-function': ['error', { autoFix: true }]
        }
    }
]

prefer-signal-primitives

has fixer

This rule will automatically wrap primitive values in a signal. Most accesses will also be updated.

Disallowed

These are examples of incorrect code.

import { Component } from '@angular/core';

@Component({
  selector: 'app-my-component',
  template: ` <div>{{ isOpen ? 'Close' : 'Open' }}</div> `,
})
export class MyComponent {
  isOpen = false;

  toggle() {
    this.isOpen = !this.isOpen;
  }
}

Allowed

These are examples of correct code.

import { Component } from '@angular/core';

@Component({
  selector: 'app-my-component',
  template: ` <div>{{ isOpen() ? 'Close' : 'Open' }}</div> `,
})
export class MyComponent {
  isOpen = signal(false);

  toggle() {
    this.isOpen.set(!this.isOpen());
  }
}

remove-restricted-syntax

has fixer

This rule will remove restricted syntax from the codebase. This can be used to perform production builds.

Configuration

Provide an array of objects of { remove: 'selector' } or { report: 'selector' }. The remove option will remove the syntax from the codebase, while the report option will only report the syntax (suitable for CI/CI pre checks).

Example (HTML rule)

Automatically remove all data-testid attributes from the HTML at build time.

import myul from '@my-ul/eslint-plugin';
import templateParser from '@angular-eslint/template-parser';

export default [
  {
    files: ['*.html'],
    plugins: {
      myul,
    },
    parser: templateParser,
    rules: {
      // Remove all data-testid attributes
      'myul/remove-restricted-syntax': [
        'error',
        { report: 'Element$1 > TextAttribute[name=data-testid]' },
      ],
    },
  },
];

Example (TypeScript rule)

Automatically remove all console.* and debugger statements from the TypeScript codebase at build time.

import myul from '@my-ul/eslint-plugin';

export default [
  {
    files: ['*.ts'],
    plugins: {
      myul,
    },
    // requires @typescript-eslint/parser
    // parser: '@typescript-eslint/parser',
    rules: {
      'myul/remove-restricted-syntax': [
        'error',
        { remove: 'CallExpression[callee.name=console]' },
        { remove: 'DebuggerStatement' },
      ],
    },
  },
];