ESLint rules for AngularJS projects
npm install eslint-plugin-angular> ESLint rules for your angular project with checks for best-practices, conventions or potential errors.



This repository will give access to new rules for the ESLint tool. You should use it only if you are developing an AngularJS application.
Since the 0.0.4 release, some rules defined in John Papa's Guideline have been implemented. In the description below, you will have a link to the corresponding part of the guideline, in order to have more information.
- 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
1. Install eslint as a dev-dependency:
``shell`
npm install --save-dev eslint
2. Install eslint-plugin-angular as a dev-dependency:
`shell`
npm install --save-dev eslint-plugin-angular
3. Use the shareable config by adding it to your eslintrc.config.mjs:
`javascript
import angular from "eslint-plugin-angular";
export default defineConfig([{
plugins: {
angular
},
rules: {
...angular.configs.johnpapa.rules
}
}]);
`
1. Install eslint as a dev-dependency:
`shell`
npm install --save-dev eslint
2. Install eslint-plugin-angular as a dev-dependency:
`shell`
npm install --save-dev eslint-plugin-angular
3. Enable the plugin by adding it to your eslint.config.mjs:
`javascript
import angular from "eslint-plugin-angular";
export default defineConfig([{
plugins: {
angular
}
}]);
`eslint.config.mjs
4. You can also configure these rules in your . All rules defined in this plugin have to be prefixed by 'angular/'
`javascript
import angular from "eslint-plugin-angular";
export default defineConfig([{
plugins: {
angular
},
rules: {
"angular/controller-name": "error"
}
}]);
`
----
Rules in eslint-plugin-angular are divided into several categories to help you better understand their value.
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 $$
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)$scope
* controller-as - disallow assignments to in controllers (y031)$q(function(resolve, reject){})
* deferred - use instead of $q.deferred$http
* 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 ( for controllers, filters and directives)$on
* on-watch - require and $watch deregistration callbacks to be saved in a variable
* prefer-component -
These rules prevent you from using deprecated angular features.
* no-cookiestore - use $cookies instead of $cookieStore$http
* no-directive-replace - disallow the deprecated directive replace property
* no-http-callback - disallow the methods success() and error()
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)
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 variablesfactory()
* 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 instead of service() (y040)$scope.digest()
* 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 or $scope.apply()
These rules help you to enforce the usage of angular wrappers.
* angularelement - use angular.element instead of $ or jQueryangular.isDefined
* definedundefined - use and angular.isUndefined instead of other undefined checks$document
* document-service - use instead of document (y180)angular.forEach
* foreach - use instead of native Array.prototype.forEach$interval
* interval-service - use instead of setInterval (y181)angular.fromJson
* json-functions - use and 'angular.toJson' instead of JSON.parse and JSON.stringify$log
* log - use the service instead of the console methodsangular.mock
* no-angular-mock - require to use methods directlyangular.element
* no-jquery-angularelement - disallow to wrap objects with jQuery or $$timeout
* timeout-service - use instead of setTimeout (y181)angular.isArray
* typecheck-array - use instead of typeof comparisonsangular.isDate
* typecheck-date - use instead of typeof comparisonsangular.isFunction
* typecheck-function - use instead of typeof comparisonsangular.isNumber
* typecheck-number - use instead of typeof comparisonsangular.isObject
* typecheck-object - use instead of typeof comparisonsangular.isString
* typecheck-string - use instead of typeof comparisons$window
* window-service - use instead of window (y180)
These rules help you avoiding misspellings.
* on-destroy - Check for common misspelling $on('destroy', ...).
----
It is an opensource project. Any help will be very useful. You can :
- Create issue
- Send Pull Request
- Write Documentation
- Add new Features
- Add new Rules
- Improve the quality
- Reply to issues
All development happens on the development branch. This means all pull requests should be made to the development branch.
If it is time to release, @Gillespie59 will bump the version in package.json, create a Git tag and merge the development branch into master. @Gillespie59 will then publish the new release to the npm registry.
We appreciate contributions and the following notes will help you before you open a Pull Request.
Have a look at the existing issues. There may exist similar issues with useful information.
There are some useful references for creating new rules. Specificly useful are:
* The Context Object - This is the most basic understanding needed for adding or modifying a rule.
* Options Schemas - This is the preferred way for validating configuration options.
* Scope - This is the scope object returned by context.getScope().
* rules/
* JavaScript file with the new rule
* The filename is exactly the usage name in eslint configs angular/angularRule
* Have a look at the wrapper and the utils (both in rules/utils/) - they probably make things easier for yougulp docs
* Add a documentation comment to generate a markdown documentation with the tasktest/
* gulp test
* Write some tests and execute them with coverage/lcov-report/index.html
* Have a look at the coverage reports examples/
* gulp docs
* Add some examples for the documentation
* Run the task to test the examples and update the markdown documentationdocs/
* gulp docs
* Generated by the task
* index.jsrulesConfiguration.addRule('
* Add your rule
* Check that the gulp task is workingREADME.md
* Commit generated changes in and docs/development
* Open your PR to the branch NOT master
We can use a property, defined in the ESLint configuration file, in order to know which version is used : Angular 1 or Angular 2. based on this property, you can create rules for each version.
`javascript
import angular from "eslint-plugin-angular";
export default defineConfig([
{
files: ["*/.js"],
plugins: {
angular
},
languageOptions: {
globals: {
angular: true
}
},
settings: {
angular: 2
},
rules: {
"angular/controller-name": ["error", "/[A-Z].*Controller$/"]
}
}
]);
`
And in your rule, you can access to this property thanks to the context object :
`javascript
//If Angular 2 is used, we disabled the rule
if(context.settings.angular === 2){
return {};
}
return {
'CallExpression': function(node) {
}
};
`
Here is the basic configuration for the rules defined in the ESLint plugin, in order to be compatible with the guideline provided by @johnpapa :
`javascript``
rules: {
"no-use-before-define": "off"
}
- argo
- generator-gillespie59-angular
- generator-ng-poly
- JHipster
- generator-gulp-angular
 |  |  |
:---:|:---:|:---:|
Emmanuel Demey | Tilman Potthof | Remco Haszing |