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
Securityby
Pending
The risk profile of this skill
deprecated-features.mddocs/
Deprecated Feature Rules
Rules that prevent usage of deprecated Angular 1.x features, helping maintain compatibility and encouraging migration to supported alternatives.
Capabilities
No CookieStore
Prevents usage of the deprecated $cookieStore service in favor of $cookies.
/**
* Use $cookies instead of $cookieStore
* $cookieStore service was deprecated in Angular 1.4 in favor of $cookies
*/
const noCookiestore = {
meta: {
docs: { url: "https://github.com/Gillespie59/eslint-plugin-angular/blob/master/docs/rules/no-cookiestore.md" };
schema: [];
};
create: (context: ESLintContext) => ESLintVisitor;
};Usage Example:
// ✗ BAD - Using deprecated $cookieStore
angular.module('myApp').controller('MyController', function($cookieStore) {
var userToken = $cookieStore.get('token');
$cookieStore.put('token', newToken);
$cookieStore.remove('token');
});
// ✓ GOOD - Using $cookies service
angular.module('myApp').controller('MyController', function($cookies) {
var userToken = $cookies.get('token');
$cookies.put('token', newToken);
$cookies.remove('token');
});No Directive Replace
Disallows the deprecated directive replace property.
/**
* Disallow the deprecated directive replace property
* The replace property was deprecated in Angular 1.3 and removed in Angular 2+
*/
const noDirectiveReplace = {
meta: {
docs: { url: "https://github.com/Gillespie59/eslint-plugin-angular/blob/master/docs/rules/no-directive-replace.md" };
schema: [];
};
create: (context: ESLintContext) => ESLintVisitor;
};Usage Example:
// ✗ BAD - Using deprecated replace property
angular.module('myApp').directive('myDirective', function() {
return {
restrict: 'E',
template: '<div>Content</div>',
replace: true // Deprecated property
};
});
// ✓ GOOD - Directive without replace property
angular.module('myApp').directive('myDirective', function() {
return {
restrict: 'E',
template: '<div>Content</div>'
// replace property removed
};
});
// ✓ GOOD - Using component instead (Angular 1.5+)
angular.module('myApp').component('myComponent', {
template: '<div>Content</div>'
});No HTTP Callback
Disallows the deprecated $http methods success() and error().
/**
* Disallow the $http methods success() and error()
* These methods were deprecated in Angular 1.6 in favor of standard promise methods
*/
const noHttpCallback = {
meta: {
docs: { url: "https://github.com/Gillespie59/eslint-plugin-angular/blob/master/docs/rules/no-http-callback.md" };
schema: [];
};
create: (context: ESLintContext) => ESLintVisitor;
};Usage Example:
// ✗ BAD - Using deprecated success/error methods
$http.get('/api/users')
.success(function(data) {
console.log('Success:', data);
})
.error(function(error) {
console.log('Error:', error);
});
// ✓ GOOD - Using standard promise methods
$http.get('/api/users')
.then(function(response) {
console.log('Success:', response.data);
})
.catch(function(error) {
console.log('Error:', error);
});
// ✓ GOOD - Using modern promise syntax (if supported)
$http.get('/api/users')
.then(function(response) {
console.log('Success:', response.data);
}, function(error) {
console.log('Error:', error);
});Migration Benefits
Avoiding deprecated features provides several advantages:
Future Compatibility
- Angular 2+ Migration: Deprecated features don't exist in Angular 2+, so avoiding them eases migration
- Long-term Support: Using current APIs ensures continued support in future Angular 1.x versions
- Community Support: Current APIs have better documentation and community resources
Performance and Reliability
- Optimized Code: Current APIs are typically more performant than their deprecated counterparts
- Bug Fixes: Deprecated features may not receive bug fixes or security updates
- Standard Compliance: Modern APIs follow web standards more closely
Development Experience
- Better Tooling: Modern APIs have better IDE support and debugging capabilities
- Consistent Patterns: Current APIs follow more consistent naming and usage patterns
- Type Safety: Newer APIs often have better TypeScript definitions
Common Migration Patterns
interface DeprecationMigrations {
/** Cookie service migration */
cookieStore: {
from: "$cookieStore.get(key)";
to: "$cookies.get(key)";
};
/** HTTP callback migration */
httpCallbacks: {
from: "$http.get(url).success(callback).error(errorCallback)";
to: "$http.get(url).then(successCallback, errorCallback)";
};
/** Directive replace migration */
directiveReplace: {
from: "directive with replace: true";
to: "component or directive without replace";
};
}Complete Migration Example:
// Before - Using all deprecated features
angular.module('myApp')
.directive('userCard', function() {
return {
restrict: 'E',
replace: true, // Deprecated
template: '<div class="user-card">{{user.name}}</div>',
controller: function($scope, $http, $cookieStore) {
var userId = $cookieStore.get('currentUser'); // Deprecated
$http.get('/api/users/' + userId)
.success(function(data) { // Deprecated
$scope.user = data;
})
.error(function(error) { // Deprecated
console.log('Error:', error);
});
}
};
});
// After - Using current features
angular.module('myApp')
.component('userCard', { // Component instead of directive
template: '<div class="user-card">{{$ctrl.user.name}}</div>',
controller: function($http, $cookies) {
var ctrl = this;
var userId = $cookies.get('currentUser'); // Current API
$http.get('/api/users/' + userId)
.then(function(response) { // Current promise API
ctrl.user = response.data;
})
.catch(function(error) { // Standard error handling
console.log('Error:', error);
});
}
});These rules help ensure your AngularJS application uses current, supported APIs that will be easier to maintain and migrate in the future.
Install with Tessl CLI
npx tessl i tessl/npm-eslint-plugin-angular