or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

angular-wrappers.mdbest-practices.mddeprecated-features.mddevelopment-conventions.mderror-prevention.mdindex.mdnaming-conventions.md
tile.json

naming-conventions.mddocs/

Naming Convention Rules

Rules that enforce consistent naming patterns across Angular components, helping maintain code readability and consistency throughout the application.

Capabilities

Component Name

Requires and specifies a prefix for all component names.

/**
 * Require and specify a prefix for all component names
 * Prevents naming conflicts and enforces naming consistency
 * You cannot prefix components with "ng" (reserved for AngularJS core)
 */
const componentName = {
  meta: {
    docs: { url: "https://github.com/Gillespie59/eslint-plugin-angular/blob/master/docs/rules/component-name.md" };
    schema: [{ type: ["string", "object"] }];
  };
  create: (context: ESLintContext) => ESLintVisitor;
};

Usage Example:

// Configuration: ["error", "myApp"]

// ✗ BAD - Missing or wrong prefix
angular.module('myApp').component('userList', {});
angular.module('myApp').component('ngUserList', {}); // ng prefix reserved

// ✓ GOOD - Correct prefix usage
angular.module('myApp').component('myAppUserList', {});

Constant Name

Requires and specifies a prefix for all constant names.

/**
 * Require and specify a prefix for all constant names
 * Enforces consistent naming for application constants
 * Linked to John Papa's Angular Style Guide y125
 */
const constantName = {
  meta: {
    docs: { url: "https://github.com/Gillespie59/eslint-plugin-angular/blob/master/docs/rules/constant-name.md" };
    schema: [{ type: ["string", "object"] }];
  };
  create: (context: ESLintContext) => ESLintVisitor;
};

Usage Example:

// Configuration: ["error", "MY_APP"]

// ✗ BAD - Incorrect constant naming
angular.module('myApp').constant('apiUrl', 'http://api.example.com');

// ✓ GOOD - Proper constant naming with prefix
angular.module('myApp').constant('MY_APP_API_URL', 'http://api.example.com');

Controller Name

Requires and specifies a prefix for all controller names with Controller suffix.

/**
 * Require and specify a prefix for all controller names
 * Enforces consistent controller naming with Controller suffix
 * Linked to John Papa's Angular Style Guide y123, y124
 */
const controllerName = {
  meta: {
    docs: { url: "https://github.com/Gillespie59/eslint-plugin-angular/blob/master/docs/rules/controller-name.md" };
    schema: [{ type: ["string", "object"] }];
  };
  create: (context: ESLintContext) => ESLintVisitor;
};

Usage Example:

// Configuration: ["error", "MyApp"]

// ✗ BAD - Missing prefix or Controller suffix
angular.module('myApp').controller('UserList', UserListController);
angular.module('myApp').controller('MyAppUserList', UserListController);

// ✓ GOOD - Correct naming pattern
angular.module('myApp').controller('MyAppUserListController', UserListController);

Directive Name

Requires and specifies a prefix for all directive names.

/**
 * Require and specify a prefix for all directive names
 * Prevents naming conflicts with HTML elements and other directives
 * Linked to John Papa's Angular Style Guide y073, y126
 */
const directiveName = {
  meta: {
    docs: { url: "https://github.com/Gillespie59/eslint-plugin-angular/blob/master/docs/rules/directive-name.md" };
    schema: [{ type: ["string", "object"] }];
  };
  create: (context: ESLintContext) => ESLintVisitor;
};

Usage Example:

// Configuration: ["error", "myApp"]

// ✗ BAD - Missing prefix
angular.module('myApp').directive('userCard', function() {});

// ✓ GOOD - Proper directive naming
angular.module('myApp').directive('myAppUserCard', function() {});

Factory Name

Requires and specifies a prefix for all factory names.

/**
 * Require and specify a prefix for all factory names
 * Enforces consistent factory service naming
 * Linked to John Papa's Angular Style Guide y125
 */
const factoryName = {
  meta: {
    docs: { url: "https://github.com/Gillespie59/eslint-plugin-angular/blob/master/docs/rules/factory-name.md" };
    schema: [{ type: ["string", "object"] }];
  };
  create: (context: ESLintContext) => ESLintVisitor;
};

File Name

Requires and specifies a consistent component name pattern for file naming.

/**
 * Require and specify a consistent component name pattern
 * Enforces file naming conventions that match component names
 * Linked to John Papa's Angular Style Guide y120, y121
 */
const fileName = {
  meta: {
    docs: { url: "https://github.com/Gillespie59/eslint-plugin-angular/blob/master/docs/rules/file-name.md" };
    schema: [{
      type: "object",
      properties: {
        nameStyle: { type: "string" },
        typeSeparator: { type: "string" },
        ignoreTypeSuffix: { type: "boolean" },
        ignorePrefix: { type: "boolean" }
      }
    }];
  };
  create: (context: ESLintContext) => ESLintVisitor;
};

Usage Example:

// For file: user-list.controller.js
// ✓ GOOD - File name matches component pattern
angular.module('myApp').controller('UserListController', UserListController);

// For file: userService.js
// ✗ BAD - Inconsistent naming style
angular.module('myApp').service('userService', UserService);

Filter Name

Requires and specifies a prefix for all filter names.

/**
 * Require and specify a prefix for all filter names
 * Enforces consistent filter naming to prevent conflicts
 */
const filterName = {
  meta: {
    docs: { url: "https://github.com/Gillespie59/eslint-plugin-angular/blob/master/docs/rules/filter-name.md" };
    schema: [{ type: ["string", "object"] }];
  };
  create: (context: ESLintContext) => ESLintVisitor;
};

Usage Example:

// Configuration: ["error", "myApp"]

// ✗ BAD - Missing prefix
angular.module('myApp').filter('currency', function() {});

// ✓ GOOD - Proper filter naming
angular.module('myApp').filter('myAppCurrency', function() {});

Module Name

Requires and specifies a prefix for all module names.

/**
 * Require and specify a prefix for all module names
 * Enforces consistent module naming across the application
 * Linked to John Papa's Angular Style Guide y127
 */
const moduleName = {
  meta: {
    docs: { url: "https://github.com/Gillespie59/eslint-plugin-angular/blob/master/docs/rules/module-name.md" };
    schema: [{ type: ["string", "object"] }];
  };
  create: (context: ESLintContext) => ESLintVisitor;
};

Usage Example:

// Configuration: ["error", "myCompany"]

// ✗ BAD - Missing company prefix
angular.module('users', []);
angular.module('admin', []);

// ✓ GOOD - Consistent module naming
angular.module('myCompany.users', []);
angular.module('myCompany.admin', []);

Provider Name

Requires and specifies a prefix for all provider names.

/**
 * Require and specify a prefix for all provider names
 * Enforces consistent provider naming patterns
 * Linked to John Papa's Angular Style Guide y125
 */
const providerName = {
  meta: {
    docs: { url: "https://github.com/Gillespie59/eslint-plugin-angular/blob/master/docs/rules/provider-name.md" };
    schema: [{ type: ["string", "object"] }];
  };
  create: (context: ESLintContext) => ESLintVisitor;
};

Service Name

Requires and specifies a prefix for all service names.

/**
 * Require and specify a prefix for all service names
 * Enforces consistent service naming to avoid conflicts
 * Linked to John Papa's Angular Style Guide y125
 */
const serviceName = {
  meta: {
    docs: { url: "https://github.com/Gillespie59/eslint-plugin-angular/blob/master/docs/rules/service-name.md" };
    schema: [{ type: ["string", "object"] }];
  };
  create: (context: ESLintContext) => ESLintVisitor;
};

Usage Example:

// Configuration: ["error", "myApp"]

// ✗ BAD - Generic service names that may conflict
angular.module('myApp').service('DataService', DataService);
angular.module('myApp').service('ApiService', ApiService);

// ✓ GOOD - Prefixed service names
angular.module('myApp').service('myAppDataService', DataService);
angular.module('myApp').service('myAppApiService', ApiService);

Value Name

Requires and specifies a prefix for all value names.

/**
 * Require and specify a prefix for all value names
 * Enforces consistent value service naming
 * Linked to John Papa's Angular Style Guide y125
 */
const valueName = {
  meta: {
    docs: { url: "https://github.com/Gillespie59/eslint-plugin-angular/blob/master/docs/rules/value-name.md" };
    schema: [{ type: ["string", "object"] }];
  };
  create: (context: ESLintContext) => ESLintVisitor;
};

Rule Configuration Patterns

All naming rules support flexible configuration options:

interface NamingRuleConfig {
  /** String prefix to require */
  prefix?: string;
  /** Regular expression pattern (as string) */
  pattern?: string;
  /** Object configuration with additional options */
  config?: {
    prefix?: string;
    pattern?: string;
    oldModule?: string;
    newModule?: string;
  };
}

Configuration Examples:

// Simple prefix
"angular/controller-name": ["error", "myApp"]

// Regular expression pattern
"angular/controller-name": ["error", "/[A-Z].*Controller$/"]

// Object configuration
"angular/controller-name": ["error", {
  "prefix": "myApp",
  "oldModule": "oldApp",
  "newModule": "myApp"
}]