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

angular-wrappers.mddocs/

Angular Wrapper Rules

Rules that enforce usage of Angular's service wrappers instead of native JavaScript APIs. This ensures proper integration with Angular's digest cycle and provides better testability.

Capabilities

Angular Element

Enforces using angular.element instead of $ or jQuery for DOM manipulation.

/**
 * Use angular.element instead of $ or jQuery
 * Ensures consistent DOM element wrapping through Angular
 */
const angularelement = {
  meta: {
    docs: { url: "https://github.com/Gillespie59/eslint-plugin-angular/blob/master/docs/rules/angularelement.md" };
    schema: [];
  };
  create: (context: ESLintContext) => ESLintVisitor;
};

Usage Example:

// ✗ BAD - Direct jQuery usage
var element = $('#myElement');
var element = jQuery('.my-class');

// ✓ GOOD - Using Angular element wrapper
var element = angular.element('#myElement');
var element = angular.element('.my-class');

Defined/Undefined Checks

Enforces using angular.isDefined and angular.isUndefined instead of other undefined checks.

/**
 * Use angular.isDefined and angular.isUndefined instead of other undefined checks
 * Provides consistent undefined checking across Angular applications
 */
const definedundefined = {
  meta: {
    docs: { url: "https://github.com/Gillespie59/eslint-plugin-angular/blob/master/docs/rules/definedundefined.md" };
    schema: [];
  };
  create: (context: ESLintContext) => ESLintVisitor;
};

Usage Example:

// ✗ BAD - Native undefined checks
if (typeof value !== 'undefined') {}
if (value !== undefined) {}

// ✓ GOOD - Angular undefined checks
if (angular.isDefined(value)) {}
if (angular.isUndefined(value)) {}

Document Service

Enforces using $document service instead of global document.

/**
 * Use $document instead of document
 * Ensures proper Angular integration and testability
 * Linked to John Papa's Angular Style Guide y180
 */
const documentService = {
  meta: {
    docs: { url: "https://github.com/Gillespie59/eslint-plugin-angular/blob/master/docs/rules/document-service.md" };
    schema: [];
  };
  create: (context: ESLintContext) => ESLintVisitor;
};

Usage Example:

// ✗ BAD - Global document usage
document.getElementById('myElement');
document.createElement('div');

// ✓ GOOD - Angular $document service
// In controller/service with $document injected:
$document[0].getElementById('myElement');
$document[0].createElement('div');

ForEach

Enforces using angular.forEach instead of native Array.prototype.forEach.

/**
 * Use angular.forEach instead of native Array.prototype.forEach
 * Provides consistent iteration method across Angular applications
 */
const foreach = {
  meta: {
    docs: { url: "https://github.com/Gillespie59/eslint-plugin-angular/blob/master/docs/rules/foreach.md" };
    schema: [];
  };
  create: (context: ESLintContext) => ESLintVisitor;
};

Usage Example:

// ✗ BAD - Native forEach
items.forEach(function(item) {
  console.log(item);
});

// ✓ GOOD - Angular forEach
angular.forEach(items, function(item) {
  console.log(item);
});

Interval Service

Enforces using $interval service instead of setInterval.

/**
 * Use $interval instead of setInterval
 * Integrates with Angular's digest cycle and lifecycle
 * Linked to John Papa's Angular Style Guide y181
 */
const intervalService = {
  meta: {
    docs: { url: "https://github.com/Gillespie59/eslint-plugin-angular/blob/master/docs/rules/interval-service.md" };
    schema: [];
  };
  create: (context: ESLintContext) => ESLintVisitor;
};

Usage Example:

// ✗ BAD - Native setInterval
var intervalId = setInterval(function() {
  // periodic task
}, 1000);

// ✓ GOOD - Angular $interval service
// In controller/service with $interval injected:
var intervalPromise = $interval(function() {
  // periodic task
}, 1000);

JSON Functions

Enforces using angular.fromJson and angular.toJson instead of JSON.parse and JSON.stringify.

/**
 * Use angular.fromJson and angular.toJson instead of JSON.parse and JSON.stringify
 * Provides Angular-specific JSON handling with additional safety features
 */
const jsonFunctions = {
  meta: {
    docs: { url: "https://github.com/Gillespie59/eslint-plugin-angular/blob/master/docs/rules/json-functions.md" };
    schema: [];
  };
  create: (context: ESLintContext) => ESLintVisitor;
};

Usage Example:

// ✗ BAD - Native JSON methods
var obj = JSON.parse(jsonString);
var str = JSON.stringify(obj);

// ✓ GOOD - Angular JSON methods
var obj = angular.fromJson(jsonString);
var str = angular.toJson(obj);

Log Service

Enforces using $log service instead of console methods.

/**
 * Use the $log service instead of the console methods
 * Provides configurable logging that can be disabled in production
 */
const log = {
  meta: {
    docs: { url: "https://github.com/Gillespie59/eslint-plugin-angular/blob/master/docs/rules/log.md" };
    schema: [];
  };
  create: (context: ESLintContext) => ESLintVisitor;
};

Usage Example:

// ✗ BAD - Console logging
console.log('Debug message');
console.error('Error message');
console.warn('Warning message');

// ✓ GOOD - Angular $log service
// In controller/service with $log injected:
$log.log('Debug message');
$log.error('Error message');
$log.warn('Warning message');

No Angular Mock

Requires using angular.mock methods directly instead of through references.

/**
 * Require to use angular.mock methods directly
 * Ensures consistent testing setup patterns
 */
const noAngularMock = {
  meta: {
    docs: { url: "https://github.com/Gillespie59/eslint-plugin-angular/blob/master/docs/rules/no-angular-mock.md" };
    schema: [];
  };
  create: (context: ESLintContext) => ESLintVisitor;
};

No jQuery Angular Element

Disallows wrapping angular.element objects with jQuery or $.

/**
 * Disallow wrapping angular.element objects with jQuery or $
 * Prevents double-wrapping of DOM elements
 */
const noJqueryAngularelement = {
  meta: {
    docs: { url: "https://github.com/Gillespie59/eslint-plugin-angular/blob/master/docs/rules/no-jquery-angularelement.md" };
    schema: [];
  };
  create: (context: ESLintContext) => ESLintVisitor;
};

Usage Example:

// ✗ BAD - Double wrapping elements
var element = $(angular.element('.my-class'));
var element = jQuery(angular.element('#myId'));

// ✓ GOOD - Direct angular.element usage
var element = angular.element('.my-class');
var element = angular.element('#myId');

Timeout Service

Enforces using $timeout service instead of setTimeout.

/**
 * Use $timeout instead of setTimeout
 * Integrates with Angular's digest cycle and provides better testability
 * Linked to John Papa's Angular Style Guide y181
 */
const timeoutService = {
  meta: {
    docs: { url: "https://github.com/Gillespie59/eslint-plugin-angular/blob/master/docs/rules/timeout-service.md" };
    schema: [];
  };
  create: (context: ESLintContext) => ESLintVisitor;
};

Usage Example:

// ✗ BAD - Native setTimeout
setTimeout(function() {
  // delayed execution
}, 1000);

// ✓ GOOD - Angular $timeout service
// In controller/service with $timeout injected:
$timeout(function() {
  // delayed execution
}, 1000);

Type Check Functions

Enforces using Angular's type checking functions instead of typeof comparisons.

/**
 * Use Angular type checking functions instead of typeof comparisons
 * Provides consistent and more reliable type checking
 */
const typecheckArray = {
  meta: {
    docs: { url: "https://github.com/Gillespie59/eslint-plugin-angular/blob/master/docs/rules/typecheck-array.md" };
    schema: [];
  };
  create: (context: ESLintContext) => ESLintVisitor;
};

const typecheckDate = {
  meta: {
    docs: { url: "https://github.com/Gillespie59/eslint-plugin-angular/blob/master/docs/rules/typecheck-date.md" };
    schema: [];
  };
  create: (context: ESLintContext) => ESLintVisitor;
};

const typecheckFunction = {
  meta: {
    docs: { url: "https://github.com/Gillespie59/eslint-plugin-angular/blob/master/docs/rules/typecheck-function.md" };
    schema: [];
  };
  create: (context: ESLintContext) => ESLintVisitor;
};

const typecheckNumber = {
  meta: {
    docs: { url: "https://github.com/Gillespie59/eslint-plugin-angular/blob/master/docs/rules/typecheck-number.md" };
    schema: [];
  };
  create: (context: ESLintContext) => ESLintVisitor;
};

const typecheckObject = {
  meta: {
    docs: { url: "https://github.com/Gillespie59/eslint-plugin-angular/blob/master/docs/rules/typecheck-object.md" };
    schema: [];
  };
  create: (context: ESLintContext) => ESLintVisitor;
};

const typecheckString = {
  meta: {
    docs: { url: "https://github.com/Gillespie59/eslint-plugin-angular/blob/master/docs/rules/typecheck-string.md" };
    schema: [];
  };
  create: (context: ESLintContext) => ESLintVisitor;
};

Usage Examples:

// ✗ BAD - typeof comparisons
if (typeof value === 'string') {}
if (typeof value === 'number') {}
if (typeof value === 'function') {}
if (typeof value === 'object') {}
if (Object.prototype.toString.call(value) === '[object Array]') {}

// ✓ GOOD - Angular type checks
if (angular.isString(value)) {}
if (angular.isNumber(value)) {}
if (angular.isFunction(value)) {}
if (angular.isObject(value)) {}
if (angular.isArray(value)) {}
if (angular.isDate(value)) {}

Window Service

Enforces using $window service instead of global window.

/**
 * Use $window instead of window
 * Provides better testability and Angular integration
 * Linked to John Papa's Angular Style Guide y180
 */
const windowService = {
  meta: {
    docs: { url: "https://github.com/Gillespie59/eslint-plugin-angular/blob/master/docs/rules/window-service.md" };
    schema: [];
  };
  create: (context: ESLintContext) => ESLintVisitor;
};

Usage Example:

// ✗ BAD - Global window usage
window.location.href = '/new-page';
window.alert('Message');

// ✓ GOOD - Angular $window service
// In controller/service with $window injected:
$window.location.href = '/new-page';
$window.alert('Message');

Benefits of Angular Wrappers

Using Angular's wrapper services provides several advantages:

  1. Digest Cycle Integration: Services like $timeout and $interval automatically trigger digest cycles
  2. Testability: Angular services can be easily mocked and tested
  3. Consistency: Uniform API across different environments and Angular versions
  4. Error Handling: Better error reporting and debugging capabilities
  5. Performance: Optimized implementations for Angular applications

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