tessl/npm-codelyzer

A comprehensive static code analysis tool for Angular TypeScript projects that implements TSLint rules enforcing Angular's official style guide.

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview

Eval results

Files

Directive Rules

Name: tessl/npm-codelyzer
Author: tessl

Angular directive validation rules that enforce naming conventions and selector validation for directive classes and their metadata.

Capabilities

Directive Class Suffix Rule

Enforces that classes decorated with @Directive have the suffix "Directive" (or custom) in their name.

/**
 * Classes decorated with @Directive must have suffix "Directive" (or custom) in their name
 * Follows Angular style guide: https://angular.io/styleguide#style-02-03
 */
export class DirectiveClassSuffixRule extends Lint.Rules.AbstractRule {
  static readonly metadata: Lint.IRuleMetadata;
  static readonly FAILURE_STRING: string;
  static validate(className: string, suffixList: string[]): boolean;
  apply(sourceFile: ts.SourceFile): Lint.RuleFailure[];
}

Usage Examples:

TSLint configuration:

{
  "rules": {
    "directive-class-suffix": true,
    "directive-class-suffix": [true, "Directive", "Dir"]
  }
}

Valid directive classes:

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective { }

@Directive({
  selector: '[appTooltip]'
})
export class TooltipDir { }  // When configured with custom suffix

Directive Selector Rule

Validates directive selector naming conventions and format.

/**
 * Directive selectors should follow specified naming conventions
 * Follows Angular style guide for consistent selector patterns
 */
export class DirectiveSelectorRule extends Lint.Rules.AbstractRule {
  static readonly metadata: Lint.IRuleMetadata;
  static readonly FAILURE_STRING: string;
  apply(sourceFile: ts.SourceFile): Lint.RuleFailure[];
}

Usage Examples:

TSLint configuration:

{
  "rules": {
    "directive-selector": [true, "attribute", "app", "camelCase"],
    "directive-selector": [true, "attribute", ["app", "lib"], "camelCase"]
  }
}

Valid directive selectors:

@Directive({
  selector: '[appHighlight]'  // attribute, app prefix, camelCase
})
export class HighlightDirective { }

@Directive({
  selector: '[libDataLoader]'  // attribute, lib prefix, camelCase
})
export class DataLoaderDirective { }

@Directive({
  selector: '[appAutoFocus]'
})
export class AutoFocusDirective { }

Invalid examples:

@Directive({
  selector: '[app-highlight]'  // kebab-case not allowed for camelCase config
})
export class HighlightDirective { }

@Directive({
  selector: '[highlight]'  // missing app prefix
})
export class HighlightDirective { }

@Directive({
  selector: 'app-highlight'  // element selector not allowed for attribute config
})
export class HighlightDirective { }

Rule Configuration Options

Directive Selector Configuration

interface DirectiveSelectorConfig {
  type: "attribute" | "element";
  prefix: string | string[];
  style: "camelCase" | "kebab-case";
}

Example Configurations

{
  "rules": {
    "directive-class-suffix": [true, "Directive"],
    "directive-selector": [true, "attribute", "app", "camelCase"]
  }
}

Multiple prefixes:

{
  "rules": {
    "directive-selector": [true, "attribute", ["app", "shared", "lib"], "camelCase"]
  }
}

Common Use Cases

Structural Directives

@Directive({
  selector: '[appIfRole]'
})
export class IfRoleDirective { }

Attribute Directives

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective { }

@Directive({
  selector: '[appAutoComplete]'
})
export class AutoCompleteDirective { }

Validation Benefits

Consistency: Ensures all directive selectors follow the same naming pattern
Namespace Protection: Prefixes prevent naming conflicts with native HTML attributes
Team Conventions: Enforces team-wide naming standards
Readability: Makes directives easily identifiable in templates

Install with Tessl CLI