CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-eslint-plugin-angular

ESLint plugin providing 59 rules for AngularJS projects based on best practices and John Papa's Angular Style Guide

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

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"
}]

Install with Tessl CLI

npx tessl i tessl/npm-eslint-plugin-angular

docs

angular-wrappers.md

best-practices.md

deprecated-features.md

development-conventions.md

error-prevention.md

index.md

naming-conventions.md

tile.json