or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

accessibility-rules.mdangular-framework.mdcomponent-rules.mddecorator-metadata-rules.mddirective-rules.mdindex.mdinput-output-rules.mdlifecycle-rules.mdpipe-rules.mdstyle-architecture-rules.mdtemplate-rules.md
tile.json

tessl/npm-codelyzer

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

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/codelyzer@6.0.x

To install, run

npx @tessl/cli install tessl/npm-codelyzer@6.0.0

index.mddocs/

Codelyzer

Codelyzer is a comprehensive static code analysis tool specifically designed for Angular TypeScript projects. It implements TSLint rules that enforce Angular's official style guide, providing over 40 stable linting rules covering component architecture, template validation, accessibility checks, and code quality standards.

Package Information

  • Package Name: codelyzer
  • Package Type: npm
  • Language: TypeScript/JavaScript
  • Installation: npm install codelyzer tslint @angular/compiler @angular/core

Core Imports

import { AngularWhitespaceRule, ComponentClassSuffixRule } from "codelyzer";

For CommonJS:

const { AngularWhitespaceRule, ComponentClassSuffixRule } = require("codelyzer");

For TSLint configuration usage:

{
  "extends": ["codelyzer"],
  "rules": {
    "component-class-suffix": true,
    "directive-class-suffix": true,
    "template-banana-in-box": true
  }
}

Basic Usage

Codelyzer is primarily used through TSLint configuration:

{
  "extends": ["codelyzer"],
  "rules": {
    "component-class-suffix": true,
    "component-max-inline-declarations": true,
    "component-selector": [true, "element", "app", "kebab-case"],
    "directive-selector": [true, "attribute", "app", "camelCase"],
    "template-accessibility-alt-text": true,
    "template-banana-in-box": true,
    "template-no-call-expression": true,
    "use-lifecycle-interface": true
  }
}

Run with TSLint:

./node_modules/.bin/tslint -p tsconfig.json -c tslint.json

Architecture

Codelyzer is built around several key components:

  • TSLint Rule Classes: 49 rule implementations that extend TSLint's AbstractRule
  • Angular Framework: NgWalker and metadata readers for Angular-specific AST traversal
  • Walker Pattern: Visitor pattern implementation for traversing TypeScript and Angular ASTs
  • Template Analysis: Angular template parsing and validation capabilities
  • CSS Analysis: Stylesheet parsing and validation for component styles
  • Accessibility Checking: ARIA and accessibility validation rules

Capabilities

Component Rules

Validation rules for Angular components including naming conventions, selector validation, and architectural constraints.

export class ComponentClassSuffixRule extends AbstractRule;
export class ComponentSelectorRule extends AbstractRule;
export class ComponentMaxInlineDeclarationsRule extends AbstractRule;

Component Rules

Directive Rules

Validation rules for Angular directives including naming and selector conventions.

export class DirectiveClassSuffixRule extends AbstractRule;
export class DirectiveSelectorRule extends AbstractRule;

Directive Rules

Template Rules

Validation rules for Angular templates including accessibility, performance, and correctness checks.

export class TemplateAccessibilityAltTextRule extends AbstractRule;
export class TemplateBananaInBoxRule extends AbstractRule;
export class TemplateNoCallExpressionRule extends AbstractRule;

Template Rules

Lifecycle Rules

Validation rules for Angular lifecycle methods and interfaces.

export class UseLifecycleInterfaceRule extends AbstractRule;
export class NoLifecycleCallRule extends AbstractRule;
export class NoConflictingLifecycleRule extends AbstractRule;

Lifecycle Rules

Input/Output Rules

Validation rules for Angular component and directive inputs and outputs.

export class NoInputPrefixRule extends AbstractRule;
export class NoInputRenameRule extends AbstractRule;
export class NoOutputNativeRule extends AbstractRule;
export class NoOutputOnPrefixRule extends AbstractRule;

Input/Output Rules

Accessibility Rules

Validation rules for Angular template accessibility and ARIA compliance.

export class TemplateAccessibilityElementsContentRule extends AbstractRule;
export class TemplateAccessibilityLabelForVisitor extends AbstractRule;
export class TemplateAccessibilityValidAriaRule extends AbstractRule;

Accessibility Rules

Pipe Rules

Validation rules for Angular pipes including naming, decoration, and purity requirements.

export class PipePrefixRule extends AbstractRule;
export class NoPipeImpureRule extends AbstractRule;
export class UsePipeDecoratorRule extends AbstractRule;
export class UsePipeTransformInterfaceRule extends AbstractRule;

Pipe Rules

Decorator and Metadata Rules

Validation rules for Angular decorators and metadata properties.

export class NoAttributeDecoratorRule extends AbstractRule;
export class NoForwardRefRule extends AbstractRule;
export class NoHostMetadataPropertyRule extends AbstractRule;
export class NoQueriesMetadataPropertyRule extends AbstractRule;

Decorator and Metadata Rules

Style and Architecture Rules

Validation rules for code style, architecture patterns, and best practices.

export class ImportDestructuringSpacingRule extends AbstractRule;
export class NoUnusedCssRule extends AbstractRule;
export class PreferInlineDecoratorRule extends AbstractRule;
export class PreferOnPushComponentChangeDetectionRule extends AbstractRule;
export class PreferOutputReadonlyRule extends AbstractRule;
export class RelativeUrlPrefixRule extends AbstractRule;
export class UseComponentSelectorRule extends AbstractRule;
export class UseComponentViewEncapsulationRule extends AbstractRule;
export class UseInjectableProvidedInRule extends AbstractRule;

Style and Architecture Rules

Angular Framework

Core classes and utilities for Angular AST analysis and rule development.

export class NgWalker extends RuleWalker;
export class MetadataReader;
export class ComponentMetadata;
export class DirectiveMetadata;

Angular Framework

Types

import { AbstractRule, RuleWalker, IRuleMetadata, RuleFailure } from 'tslint';
import { SourceFile, ClassDeclaration, BooleanLiteral, Decorator } from 'typescript';
import { RawSourceMap } from 'source-map';
interface NgWalkerConfig {
  cssVisitorCtrl?: CssAstVisitorCtrl;
  expressionVisitorCtrl?: RecursiveAngularExpressionVisitorCtr;
  templateVisitorCtrl?: TemplateAstVisitorCtr;
}

class ComponentMetadata extends DirectiveMetadata {
  constructor(
    readonly controller: ClassDeclaration,
    readonly decorator: Decorator,
    readonly selector?: string,
    readonly animations?: (AnimationMetadata | undefined)[],
    readonly styles?: (StyleMetadata | undefined)[],
    readonly template?: TemplateMetadata
  );
}

class DirectiveMetadata {
  constructor(
    readonly controller: ClassDeclaration,
    readonly decorator: Decorator,
    readonly selector?: string
  );
}

type CssAstVisitorCtrl = new (...args: any[]) => BasicCssAstVisitor;
type TemplateAstVisitorCtr = new (...args: any[]) => BasicTemplateAstVisitor;
type RecursiveAngularExpressionVisitorCtr = new (...args: any[]) => RecursiveAngularExpressionVisitor;

const rulesDirectory: string;