eslint plugin angular

Contents

Usage with shareable config

Usage without shareable config

Rules

Need your help

How to create a new rule

Default ESLint configuration file

Who uses it?

Team

Usage with shareable config

Install eslint as a dev-dependency:

npm install --save-dev eslint

Install eslint-plugin-angular as a dev-dependency:

npm install --save-dev eslint-plugin-angular

Use the shareable config by adding it to your .eslintrc:

extends: plugin:angular/johnpapa

Usage without shareable config

Install eslint as a dev-dependency:

npm install --save-dev eslint

Install eslint-plugin-angular as a dev-dependency:

npm install --save-dev eslint-plugin-angular

Enable the plugin by adding it to your .eslintrc:

plugins:

- angular

You can also configure these rules in your .eslintrc. All rules defined in this plugin have to be prefixed by 'angular/'

plugins:

- angular

rules:

- angular/controller_name: 0

Rules

Rules in eslint-plugin-angular are divided into several categories to help you better understand their value.

Possible Errors

The following rules detect patterns that can lead to errors.

avoid-scope-typos - Avoid mistakes when naming methods defined on the scope object

module-getter - disallow to reference modules with variables and require to use the getter syntax instead angular.module('myModule') (y022)

module-setter - disallow to assign modules to variables (linked to module-getter (y021)

no-private-call - disallow use of internal angular properties prefixed with $$

Best Practices

These are rules designed to prevent you from making mistakes. They either prescribe a better way of doing something or help you avoid footguns..

component-limit - limit the number of angular components per file (y001)

controller-as-route - require the use of controllerAs in routes or states (y031)

controller-as-vm - require and specify a capture variable for this in controllers (y032)

controller-as - disallow assignments to $scope in controllers (y031)

deferred - use $q(function(resolve, reject){}) instead of $q.deferred

di-unused - disallow unused DI parameters

directive-restrict - disallow any other directive restrict than 'A' or 'E' (y074)

empty-controller - disallow empty controllers

no-controller - disallow use of controllers (according to the component first pattern)

no-inline-template - disallow the use of inline templates

no-run-logic - keep run functions clean and simple (y171)

no-services - disallow DI of specified services for other angular components ($http for controllers, filters and directives)

on-watch - require $on and $watch deregistration callbacks to be saved in a variable

prefer-component -

Deprecated Angular Features

These rules prevent you from using deprecated angular features.

no-cookiestore - use $cookies instead of $cookieStore

no-directive-replace - disallow the deprecated directive replace property

no-http-callback - disallow the $http methods success() and error()

Naming

These rules help you to specify several naming conventions.

component-name - require and specify a prefix for all component names

constant-name - require and specify a prefix for all constant names (y125)

controller-name - require and specify a prefix for all controller names (y123, y124)

directive-name - require and specify a prefix for all directive names (y073, y126)

factory-name - require and specify a prefix for all factory names (y125)

file-name - require and specify a consistent component name pattern (y120, y121)

filter-name - require and specify a prefix for all filter names

module-name - require and specify a prefix for all module names (y127)

provider-name - require and specify a prefix for all provider names (y125)

service-name - require and specify a prefix for all service names (y125)

value-name - require and specify a prefix for all value names (y125)

Conventions

Angular often provide multi ways to to something. These rules help you to define convention for your project.

di-order - require DI parameters to be sorted alphabetically

di - require a consistent DI syntax

dumb-inject - unittest inject functions should only consist of assignments from injected values to describe block variables

function-type - require and specify a consistent function style for components ('named' or 'anonymous') (y024)

module-dependency-order - require a consistent order of module dependencies

no-service-method - use factory() instead of service() (y040)

one-dependency-per-line - require all DI parameters to be located in their own line

rest-service - disallow different rest service and specify one of '$http', '$resource', 'Restangular'

watchers-execution - require and specify consistent use $scope.digest() or $scope.apply()

Angular Wrappers

These rules help you to enforce the usage of angular wrappers.

angularelement - use angular.element instead of $ or jQuery

definedundefined - use angular.isDefined and angular.isUndefined instead of other undefined checks

document-service - use $document instead of document (y180)

foreach - use angular.forEach instead of native Array.prototype.forEach

interval-service - use $interval instead of setInterval (y181)

json-functions - use angular.fromJson and 'angular.toJson' instead of JSON.parse and JSON.stringify

log - use the $log service instead of the console methods

no-angular-mock - require to use angular.mock methods directly

no-jquery-angularelement - disallow to wrap angular.element objects with jQuery or $

timeout-service - use $timeout instead of setTimeout (y181)

typecheck-array - use angular.isArray instead of typeof comparisons

typecheck-date - use angular.isDate instead of typeof comparisons

typecheck-function - use angular.isFunction instead of typeof comparisons

typecheck-number - use angular.isNumber instead of typeof comparisons

typecheck-object - use angular.isObject instead of typeof comparisons

typecheck-string - use angular.isString instead of typeof comparisons

window-service - use $window instead of window (y180)