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-generation.mddocs/

Project Generation

This capability handles creating new Angular applications and libraries with ESLint pre-configured, extending the standard Angular CLI generation schematics.

Capabilities

Application Schematic

Creates a new Angular application with ESLint configuration already set up.

/**
 * Create an Angular application with ESLint pre-configured
 * @param options - Application generation options extending Angular's schema
 * @returns Schematic rule that creates the application
 */
export default function (options: ApplicationSchema): Rule;

interface ApplicationSchema extends AngularApplicationSchema {
  /** Whether to set parserOptions.project in the ESLint config */
  setParserOptionsProject?: boolean;
}

Usage Examples:

# Create an application with default ESLint setup
ng generate @angular-eslint/schematics:application my-app

# Create an application with parserOptions.project enabled
ng generate @angular-eslint/schematics:application my-app --setParserOptionsProject

# Using the alias
ng generate @angular-eslint/schematics:app my-app

Library Schematic

Creates a new Angular library with ESLint configuration already set up.

/**
 * Generate a library project with ESLint pre-configured
 * @param options - Library generation options extending Angular's schema
 * @returns Schematic rule that creates the library
 */
export default function (options: LibrarySchema): Rule;

interface LibrarySchema extends AngularLibrarySchema {
  /** Whether to set parserOptions.project in the ESLint config */
  setParserOptionsProject?: boolean;
}

Usage Examples:

# Create a library with default ESLint setup
ng generate @angular-eslint/schematics:library my-lib

# Create a library with parserOptions.project enabled
ng generate @angular-eslint/schematics:library my-lib --setParserOptionsProject

# Using the alias
ng generate @angular-eslint/schematics:lib my-lib

Configuration Details

ESLint Configuration Generation

Both application and library schematics automatically generate project-specific ESLint configurations that:

  1. Extend workspace configuration: Import rules from the root ESLint config
  2. Set project-specific patterns: Configure file matching for the specific project
  3. Handle TypeScript integration: Set up proper TypeScript parsing and rules
  4. Configure template rules: Set up Angular template linting when applicable

Parser Options Project

The setParserOptionsProject option controls whether the generated ESLint configuration includes:

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

This enables type-aware linting rules but can impact performance. It's recommended for libraries and applications that need strict type checking.

Project Structure Integration

The generated projects include:

  1. ESLint configuration file: Either .eslintrc.json or eslint.config.js in the project root
  2. Lint target: Angular CLI lint target configured in angular.json
  3. TypeScript integration: Proper parser and plugin configuration for TypeScript files
  4. Template support: Configuration for linting Angular HTML templates

Generated File Examples

Project ESLint Configuration (Legacy Format)

{
  "extends": ["../../.eslintrc.json"],
  "ignorePatterns": ["!**/*"],
  "overrides": [
    {
      "files": ["*.ts"],
      "rules": {
        "@angular-eslint/directive-selector": [
          "error",
          {
            "type": "attribute",
            "prefix": "app",
            "style": "camelCase"
          }
        ],
        "@angular-eslint/component-selector": [
          "error",
          {
            "type": "element",
            "prefix": "app",
            "style": "kebab-case"
          }
        ]
      }
    },
    {
      "files": ["*.html"],
      "rules": {}
    }
  ]
}

Angular.json Lint Target

{
  "lint": {
    "builder": "@angular-eslint/builder:lint",
    "options": {
      "lintFilePatterns": [
        "projects/my-app/**/*.ts",
        "projects/my-app/**/*.html"
      ]
    }
  }
}

Types

interface ApplicationSchema extends AngularApplicationSchema {
  setParserOptionsProject?: boolean;
}

interface LibrarySchema extends AngularLibrarySchema {
  setParserOptionsProject?: boolean;
}

type AngularApplicationSchema = import("@schematics/angular/application/schema").Schema;
type AngularLibrarySchema = import("@schematics/angular/library/schema").Schema;