or run

npx @tessl/cli init

Version

Tile

Overview

Evals

Files

docs

angular-wrappers.md best-practices.md deprecated-features.md development-conventions.md error-prevention.md index.md naming-conventions.md

tile.json

eslint-plugin-angular

ESLint plugin providing 59 specialized rules for AngularJS (Angular 1.x) applications, enforcing best practices, naming conventions, and coding standards based on John Papa's Angular Style Guide and Angular community best practices.

Package Information

Package Name: eslint-plugin-angular
Package Type: npm
Language: JavaScript (Node.js)
Installation: npm install --save-dev eslint-plugin-angular

Core Imports

ESM (modern ESLint):

import angular from "eslint-plugin-angular";

CommonJS:

const angular = require("eslint-plugin-angular");

Basic Usage

Using Predefined Configurations

import angular from "eslint-plugin-angular";

export default defineConfig([{
  plugins: {
    angular
  },
  rules: {
    ...angular.configs.johnpapa.rules
  }
}]);

Using Individual Rules

import angular from "eslint-plugin-angular";

export default defineConfig([{
  plugins: {
    angular
  },
  rules: {
    "angular/controller-name": "error",
    "angular/directive-name": ["error", "myApp"],
    "angular/no-service-method": "warn"
  }
}]);

Using Environments

import angular from "eslint-plugin-angular";

export default defineConfig([{
  plugins: {
    angular
  },
  languageOptions: {
    globals: {
      ...angular.environments.angular.globals
    }
  }
}]);

Architecture

The plugin is structured around several key components:

Rules Engine: 55+ individual ESLint rules targeting specific AngularJS patterns and anti-patterns
Environment Definitions: Predefined global variable configurations for Angular, testing (mocks), and Protractor
Configuration Presets: Ready-to-use rule configurations based on established style guides
Utility Library: Shared utilities for Angular-specific AST analysis and pattern detection

Main API Components

Plugin Export Object

The main export provides access to all plugin functionality.

interface AngularESLintPlugin {
  /** Collection of all 55+ ESLint rules */
  rules: Record<string, ESLintRule>;
  /** Predefined environment configurations */
  environments: {
    angular: EnvironmentConfig;
    mocks: EnvironmentConfig;
    protractor: EnvironmentConfig;
  };
  /** Predefined rule configurations */
  configs: {
    johnpapa: ConfigPreset;
    bestpractices: ConfigPreset;
  };
}

interface ESLintRule {
  meta: {
    docs: { url: string };
    schema: any[];
  };
  create: (context: any) => any;
}

interface EnvironmentConfig {
  globals: Record<string, boolean>;
}

interface ConfigPreset {
  plugins: string[];
  rules: Record<string, any>;
}

Capabilities

Rule Categories

Rules are organized into logical categories for easy navigation and understanding:

Possible Errors

Rules that detect patterns likely to cause runtime errors or unexpected behavior.

// Key rules for error prevention
const errorPreventionRules = {
  "angular/avoid-scope-typos": Rule,
  "angular/module-getter": Rule,
  "angular/module-setter": Rule,
  "angular/no-private-call": Rule,
  "angular/on-destroy": Rule
};

Error Prevention Rules

Best Practices

Rules that enforce proven Angular development patterns and practices.

// Key rules for best practices
const bestPracticeRules = {
  "angular/controller-as": Rule,
  "angular/controller-as-vm": Rule,
  "angular/no-controller": Rule,
  "angular/prefer-component": Rule,
  "angular/no-inline-template": Rule,
  "angular/empty-controller": Rule
};

Best Practices Rules

Naming Conventions

Rules that enforce consistent naming patterns across Angular components.

// Key rules for naming consistency
const namingRules = {
  "angular/component-name": Rule,
  "angular/controller-name": Rule,
  "angular/directive-name": Rule,
  "angular/service-name": Rule,
  "angular/factory-name": Rule,
  "angular/filter-name": Rule
};

Naming Convention Rules

Angular Wrappers

Rules that encourage using Angular's service wrappers instead of native JavaScript APIs.

// Key rules for Angular wrapper usage
const wrapperRules = {
  "angular/document-service": Rule,
  "angular/window-service": Rule,
  "angular/timeout-service": Rule,
  "angular/interval-service": Rule,
  "angular/angularelement": Rule,
  "angular/log": Rule
};

Angular Wrapper Rules

Development Conventions

Rules that establish consistent code organization and dependency injection patterns.

// Key rules for development conventions
const conventionRules = {
  "angular/di": Rule,
  "angular/di-order": Rule,
  "angular/function-type": Rule,
  "angular/one-dependency-per-line": Rule,
  "angular/module-dependency-order": Rule
};

Development Convention Rules

Deprecated Features

Rules that prevent usage of deprecated Angular 1.x features.

// Key rules for avoiding deprecated features
const deprecatedRules = {
  "angular/no-cookiestore": Rule,
  "angular/no-directive-replace": Rule,
  "angular/no-http-callback": Rule
};

Deprecated Feature Rules

Environment Configurations

Predefined global variable configurations for different Angular development contexts.

interface Environments {
  /** Standard AngularJS application environment */
  angular: {
    globals: {
      angular: true;
    };
  };
  /** AngularJS testing environment with ngMock */
  mocks: {
    globals: {
      angular: true;
      inject: true;
      module: true;
    };
  };
  /** Protractor testing environment */
  protractor: {
    globals: {
      element: true;
      $: true;
      $$: true;
      browser: true;
      by: true;
      protractor: true;
    };
  };
}

Configuration Presets

Ready-to-use rule configurations based on established style guides.

interface Configs {
  /** Configuration based on John Papa's Angular Style Guide */
  johnpapa: {
    plugins: ["angular"];
    rules: Record<string, 2>; // 24 rules set to error level
  };
  /** Best practices configuration for Angular development */
  bestpractices: {
    plugins: ["angular"];
    rules: Record<string, 2>; // 16 rules set to error level
  };
}