@presencelearning/frontend-config

Shared configuration for Presence Learning Angular 18+ frontend projects.

This package provides unified configurations for:

• ESLint — Modern ESLint 9 flat config with Angular, TypeScript, and essential code-quality rules
• TypeScript — Strict TypeScript configuration for Angular 18
• Prettier — Code formatting with Angular template support
• Jest — Unit testing with jest-preset-angular
• Playwright — End-to-end testing configuration

Installation

npm install --save-dev @presencelearning/frontend-config

Common Patterns

Path Aliases

All configurations support these common path aliases:

• @root/* — Project root
• @app/* — src/app/*
• @common/* — src/app/common/*
• @modules/* — src/app/modules/*
• @environments/* — src/environments/*

Customize in your tsconfig.json and jest.config.ts.

Component Prefix

All configurations expect Angular components to use the pl- prefix:

@Component({
  selector: 'pl-my-component', // ✓ Correct
  // selector: 'my-component',  // ✗ Will trigger ESLint warning
})

Import Ordering

ESLint is configured to automatically sort imports:

// External packages first
import { Component } from '@angular/core';
import { Observable } from 'rxjs';

// Then internal imports
import { MyService } from '@app/services/my.service';
import { MyUtil } from '@common/utils/my.util';

Run npm run lint:fix to auto-fix import order.

Scripts

Add these scripts to your package.json:

{
  "scripts": {
    "lint": "eslint .",
    "lint:fix": "eslint . --fix",
    "format": "prettier --write \"src/**/*.{ts,html,css,scss,json,md}\"",
    "format:check": "prettier --check \"src/**/*.{ts,html,css,scss,json,md}\"",
    "test": "jest",
    "test:watch": "jest --watchAll",
    "test:coverage": "jest --collectCoverage",
    "test:ui": "playwright test",
    "test:ui:report": "playwright show-report test-results/ui-tests/report"
  }
}

Peer Dependencies

Install these peer dependencies in your project:

npm install --save-dev \
  @angular-eslint/eslint-plugin@^18.0.0 \
  @angular-eslint/eslint-plugin-template@^18.0.0 \
  @angular-eslint/template-parser@^18.0.0 \
  @typescript-eslint/eslint-plugin@^8.0.0 \
  @typescript-eslint/parser@^8.0.0 \
  eslint@^9.0.0 \
  eslint-config-prettier@^9.0.0 \
  eslint-plugin-import@^2.0.0 \
  prettier@^3.0.0 \
  jest@^29.0.0 \
  jest-preset-angular@^14.0.0 \
  jest-fixed-jsdom \
  @playwright/test@^1.0.0 \
  msw@^2.0.0 \
  typescript@^5.0.0

---

Source: packages/config