ESLint

Create eslint.config.mjs in your project root:

import { fileURLToPath } from 'node:url';
import { dirname } from 'node:path';
import createConfig from '@presencelearning/frontend-config/eslint';

const __dirname = dirname(fileURLToPath(import.meta.url));
export default createConfig(__dirname);

Features

• Modern ESLint 9 flat config format
• Angular component/directive naming conventions (pl- prefix)
• Essential code quality rules (no-var, prefer-const, eqeqeq, etc.)
• TypeScript best practices and type checking
• Import ordering and organization, with import/internal-regex covering the six standard path aliases
• NgRx linting via eslint-plugin-ngrx
• GraphQL linting for **/*.graphql
• Relaxed rules in **/*.spec.ts — any and console are allowed, and a ComponentStub suffix is accepted
• import/no-extraneous-dependencies with a devDependencies allowlist
• Optimized for performance

Both @graphql-eslint/eslint-plugin and eslint-plugin-ngrx are imported statically at the top of the config, so they are required in practice regardless of how peerDependenciesMeta marks them. A project without them fails at config load.

Note that the global ignores list includes '**/*.config.ts', so your own jest.config.ts and playwright.config.ts are never linted.

Component and directive selector prefixes are enforced at warn severity, not error.

Migration from existing config

1. Remove old ESLint config files (.eslintrc, .eslintrc.json, .eslintrc.js)
2. Install @presencelearning/frontend-config
3. Create new eslint.config.mjs importing this package (ESLint 9 flat config format)
4. Upgrade to ESLint 9 and TypeScript ESLint 8
5. Run npm run lint:fix to auto-fix issues

Troubleshooting

ESLint can’t find tsconfig

The config requires the project root directory to resolve tsconfig files correctly. Make sure you’re passing __dirname to the config factory:

import { fileURLToPath } from 'node:url';
import { dirname } from 'node:path';
import createConfig from '@presencelearning/frontend-config/eslint';

const __dirname = dirname(fileURLToPath(import.meta.url));
export default createConfig(__dirname); // ← Must pass __dirname

This ensures the TypeScript parser can find tsconfig.json, tsconfig.app.json, and tsconfig.spec.json in your project root.

Prettier conflicts with ESLint

This config includes eslint-config-prettier to disable conflicting rules. Always run Prettier after ESLint:

npm run lint:fix && npm run format