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
• GraphQL linting support (optional)
• Optimized for performance

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