Rules that enforce consistent naming patterns across Angular components, helping maintain code readability and consistency throughout the application.
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', {});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');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);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() {});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;
};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);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() {});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', []);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;
};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);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;
};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"
}]