eslint-plugin-angular

    4.1.0 • Public • Published

    eslint plugin angular Npm version Npm downloads per month

    Greenkeeper badge

    ESLint rules for your angular project with checks for best-practices, conventions or potential errors.

    Build Status Npm dependencies devDependency Status Join the chat at https://gitter.im/Gillespie59/eslint-plugin-angular Coverage Status

    Summary

    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.

    Contents

    Usage with shareable config

    1. Install eslint as a dev-dependency:

      npm install --save-dev eslint
    2. Install eslint-plugin-angular as a dev-dependency:

      npm install --save-dev eslint-plugin-angular
    3. Use the shareable config by adding it to your .eslintrc:

      extends: plugin:angular/johnpapa

    Usage without shareable config

    1. Install eslint as a dev-dependency:

      npm install --save-dev eslint
    2. Install eslint-plugin-angular as a dev-dependency:

      npm install --save-dev eslint-plugin-angular
    3. Enable the plugin by adding it to your .eslintrc:

      plugins:
        - angular
    4. 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.

    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..

    Deprecated Angular Features

    These rules prevent you from using deprecated angular features.

    Naming

    These rules help you to specify several naming conventions.

    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.

    Misspelling

    These rules help you avoiding misspellings.

    • on-destroy - Check for common misspelling $on('destroy', ...).

    Need your help

    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.

    How to create a new rule

    We appreciate contributions and the following notes will help you before you open a Pull Request.

    Check the issues

    Have a look at the existing issues. There may exist similar issues with useful information.

    Read the documentation

    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().

    Files you have to create

    • rules/<your-rule>.js
      • JavaScript file with the new rule
      • The filename <your-rule> is exactly the usage name in eslint configs angular/<your-rule>
      • Have a look at the angularRule wrapper and the utils (both in rules/utils/) - they probably make things easier for you
      • Add a documentation comment to generate a markdown documentation with the gulp docs task
    • test/<your-rule>.js
      • Write some tests and execute them with gulp test
      • Have a look at the coverage reports coverage/lcov-report/index.html
    • examples/<your-rule>.js
      • Add some examples for the documentation
      • Run the gulp docs task to test the examples and update the markdown documentation
    • docs/<your-rule>.md
      • Generated by the gulp docs task

    Files you have to touch

    • index.js
      • Add your rule rulesConfiguration.addRule('<your-rule>', [0, {someConfig: 'someValue'}])

    Before you open your PR

    • Check that the gulp task is working
    • Commit generated changes in README.md and docs/<your-rule>.md
    • Open your PR to the development branch NOT master

    Rules specific for Angular 1 or 2

    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.

    plugins:
      - angular
    
    rules:
        angular/controller-name:
          - 2
          - '/[A-Z].*Controller$/'
    
    globals:
        angular: true
    
    settings:
        angular: 2

    And in your rule, you can access to this property thanks to the context object :

    //If Angular 2 is used, we disabled the rule
    if(context.settings.angular === 2){
        return {};
    }
    
    return {
    
        'CallExpression': function(node) {
        }
    };

    Default ESLint configuration file

    Here is the basic configuration for the rules defined in the ESLint plugin, in order to be compatible with the guideline provided by @johnpapa :

    rules:
        no-use-before-define:
          - 0

    Who uses it?

    Team

    Emmanuel Demey Tilman Potthof Remco Haszing
    Emmanuel Demey Tilman Potthof Remco Haszing

    Install

    npm i eslint-plugin-angular

    DownloadsWeekly Downloads

    79,162

    Version

    4.1.0

    License

    MIT

    Unpacked Size

    217 kB

    Total Files

    81

    Last publish

    Collaborators

    • emmanueldemey