or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

index.mdmigration-system.mdproject-configuration.mdproject-generation.mdutility-functions.mdworkspace-setup.md
tile.json

project-configuration.mddocs/

Project Configuration

This capability handles adding ESLint configuration to existing Angular projects that don't already have it configured.

Capabilities

Add ESLint to Project Schematic

Adds ESLint configuration to an existing Angular CLI project within a workspace.

/**
 * Add ESLint to an Angular CLI project
 * @param schema - Configuration options for adding ESLint
 * @returns Schematic rule that adds ESLint to the project
 */
function addESLintToProject(schema: AddESLintToProjectSchema): Rule;

interface AddESLintToProjectSchema {
  /** Name of the project to add ESLint to. If not specified, attempts to determine automatically */
  project?: string;
  /** Whether to set parserOptions.project in the ESLint config */
  setParserOptionsProject?: boolean;
}

Usage Examples:

# Add ESLint to a specific project
ng generate @angular-eslint/schematics:add-eslint-to-project --project=my-app

# Add ESLint with automatic project detection
ng generate @angular-eslint/schematics:add-eslint-to-project

# Add ESLint with parserOptions.project enabled
ng generate @angular-eslint/schematics:add-eslint-to-project --project=my-app --setParserOptionsProject

Project Detection Logic

When the project option is not specified, the schematic uses intelligent project detection:

  1. Single project workspaces: Automatically selects the only project
  2. Multi-project workspaces: Looks for the default project in angular.json
  3. Fallback: Returns null if no clear default can be determined
/**
 * Determine target project name when not explicitly specified
 * @param tree - The file tree
 * @param maybeProject - Optional project name hint
 * @returns Project name or null if not determinable
 */
function determineTargetProjectName(tree: Tree, maybeProject?: string): string | null;

Configuration Process

The add-eslint-to-project schematic performs the following operations:

1. ESLint Configuration File Creation

Creates a project-specific ESLint configuration file that:

  • Extends the workspace root configuration
  • Sets appropriate file patterns for the project
  • Configures TypeScript and template parsing
  • Applies project-specific rule overrides

2. Angular.json Integration

Adds a lint target to the project configuration:

/**
 * Add ESLint lint target to Angular project configuration
 * @param projectName - Name of the project
 * @param targetName - Name for the lint target ('eslint' or 'lint')
 * @returns Schematic rule that adds the target
 */
function addESLintTargetToProject(projectName: string, targetName: 'eslint' | 'lint'): Rule;

3. Configuration Format Detection

The schematic automatically detects and matches the configuration format used by the workspace:

/**
 * Determine whether to use ESLint flat config or legacy eslintrc
 * @param tree - The file tree
 * @param existingJson - Optional existing configuration to check
 * @returns true if flat config should be used
 */
function shouldUseFlatConfig(tree: Tree, existingJson?: Record<string, unknown>): boolean;

/**
 * Find existing root ESLint config file path
 * @param tree - The file tree
 * @returns Config file path or null if not found
 */
function resolveRootESLintConfigPath(tree: Tree): string | null;

Advanced Configuration Options

Parser Options Project

When setParserOptionsProject is enabled, the generated configuration includes TypeScript project references:

parserOptions: {
  project: ['tsconfig.json', 'tsconfig.app.json', 'tsconfig.spec.json']
}

This enables type-aware ESLint rules but may impact linting performance.

Project Type Detection

The schematic automatically detects project types and applies appropriate configurations:

type ProjectType = 'application' | 'library';

/**
 * Extract targets/architect config from project configuration
 * @param projectConfig - Project configuration object
 * @returns TargetsConfig or null if not found
 */
function getTargetsConfigFromProject(projectConfig: any): TargetsConfig | null;

type TargetsConfig = Record<string, { builder: string; options: unknown }>;

Configuration File Formats

The schematic supports both legacy and modern ESLint configuration formats:

Legacy Format (.eslintrc.json)

{
  "extends": ["../../.eslintrc.json"],
  "ignorePatterns": ["!**/*"],
  "overrides": [
    {
      "files": ["*.ts"],
      "rules": {}
    },
    {
      "files": ["*.html"],
      "rules": {}
    }
  ]
}

Modern Flat Config (eslint.config.js)

import baseConfig from '../../eslint.config.js';

export default [
  ...baseConfig,
  {
    files: ['**/*.ts'],
    rules: {}
  },
  {
    files: ['**/*.html'],
    rules: {}
  }
];

Error Handling

The schematic includes robust error handling for common scenarios:

  • Project not found in workspace
  • Missing or invalid angular.json
  • Conflicting existing ESLint configurations
  • Invalid project structure

Types

interface AddESLintToProjectSchema {
  project?: string;
  setParserOptionsProject?: boolean;
}

type TargetsConfig = Record<string, { builder: string; options: unknown }>;
type ProjectType = 'application' | 'library';