@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/*
• @ts/* — src/types/*

Customize in your tsconfig.json and jest.config.ts. If you add an alias, also update import/internal-regex in your ESLint config — the base config hardcodes these six, and an unlisted alias is silently grouped as external by import/order.

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

The ESLint config imports its plugins statically, so everything in this first group is required even if package.json marks some of it optional — a missing plugin crashes the config at load time:

npm install --save-dev \
  @angular-eslint/eslint-plugin@^18.4.0 \
  @angular-eslint/eslint-plugin-template@^18.4.0 \
  @angular-eslint/template-parser@^18.4.0 \
  @graphql-eslint/eslint-plugin@^4.4.0 \
  @typescript-eslint/eslint-plugin@^8.46.0 \
  @typescript-eslint/parser@^8.46.0 \
  eslint@^9.38.0 \
  eslint-config-prettier@^9.1.0 \
  eslint-plugin-import@^2.32.0 \
  eslint-plugin-ngrx@^2.1.0 \
  prettier@^3.6.0 \
  typescript@^5.9.0

Add these only if you use the jest, playwright, or prettier-plugin pieces:

npm install --save-dev \
  @testing-library/jest-dom@^6.9.0 \
  @types/jest@^29.5.0 \
  jest@^29.7.0 \
  jest-fixed-jsdom@^0.0.9 \
  jest-location-mock@^2.0.0 \
  jest-preset-angular@^14.6.0 \
  msw@^2.11.0 \
  whatwg-fetch@^3.6.20 \
  @playwright/test@^1.56.0 \
  prettier-plugin-organize-imports@^4.3.0

jest-location-mock, @testing-library/jest-dom, and whatwg-fetch are imported by the shipped msw-templates/jest-global-mocks.ts template. Install them if you use that template as your jest.setup.ts, or it will fail to resolve its own imports.

Preview releases

Every PR publishes a preview build tagged pr-<number>, so you can try a config change before it merges:

npm install @presencelearning/frontend-config@pr-123

The monorepo scripts behind this are snapshot, snapshot:force, snapshot:local, and snapshot:reset.

---

Source: packages/config