eslint-plugin-ember

What is eslint-plugin-ember?

eslint-plugin-ember is an ESLint plugin that provides linting rules specific to Ember.js applications. It helps developers follow best practices and maintain consistency in their Ember.js codebase.

What are eslint-plugin-ember's main functionalities?

Best Practices

This rule enforces the best practice of avoiding the use of observers in Ember.js applications. Observers can lead to unpredictable behavior and are generally discouraged.

module.exports = {
  rules: {
    'ember/no-observers': 'error'
  }
};

Stylistic Issues

This rule ensures that developers use Ember's `get` and `set` methods for property access and assignment, which is a stylistic convention in Ember.js.

module.exports = {
  rules: {
    'ember/use-ember-get-and-set': 'error'
  }
};

Ember-Specific Rules

This rule disallows the use of jQuery in Ember.js applications, encouraging developers to use native DOM APIs or Ember's own abstractions.

module.exports = {
  rules: {
    'ember/no-jquery': 'error'
  }
};

Other packages similar to eslint-plugin-ember

eslint-plugin-react

eslint-plugin-react provides linting rules for React applications. It helps enforce best practices and coding standards specific to React, similar to how eslint-plugin-ember does for Ember.js.

eslint-plugin-vue

eslint-plugin-vue offers linting rules for Vue.js applications. It ensures that Vue.js code adheres to best practices and stylistic conventions, much like eslint-plugin-ember does for Ember.js.

eslint-plugin-angular

eslint-plugin-angular provides linting rules for Angular applications. It helps maintain code quality and consistency in Angular projects, similar to the role of eslint-plugin-ember in Ember.js projects.

README

eslint-plugin-ember

An ESlint plugin that provides set of rules for Ember Applications based on commonly known good practices.

❗️ Requirements

• ESLint is required to use this plugin.
• Rules provided by this plugin should be runnable under latest stable, v4 LTS and v6 LTS Node.js versions.

🚀 Usage

1. Install plugin

  npm install --save-dev eslint-plugin-ember

2. Modify your .eslintrc.js:

Use with predefined settings:

// .eslintrc.js
module.exports = {
  extends: [
    'eslint:recommended',
    'plugin:ember/recommended'
  ],
  rules: {
    // override rules' settings here
  }
}

Possible configurations:

• plugin:ember/base - contains only recommended settings for custom rules defined in this plugin.
• plugin:ember/recommended - extends base configuration with extra rules' settings provided by eslint

Use plain plugin:

If you don't want to use predefined settings, you can use it as a plain plugin and choose which rules you'd like to use by yourself like this:

module.exports = {
  extends: [
    'eslint:recommended'
  ],
  plugins: [
    'ember'
  ],
  rules: {
    // add rules' settings here, eg.:
    'ember/local-modules': 2
  }
}

All rules from this plugin have to be prefixed with ember/

🍟 Rules

• General

  • local-modules - Create local version of Ember.* and DS.* (more)
  • no-observers - Don't use observers (more)
  • no-old-shims - Don't use import paths from ember-cli-shims (more)
  • no-side-effects - Don't introduce side-effects in computed properties (more)
  • jquery-ember-run - Don’t use jQuery without Ember Run Loop (more)
  • named-functions-in-promises - Use named functions defined on objects to handle promises (more)
  • no-function-prototype-extensions - Don't use Ember's function prototype extensions (more)
  • use-ember-get-and-set - Use Ember get/set (more)
  • use-brace-expansion - Use brace expansion (more)

• Organizing

  • order-in-components - Organize your components (more)
  • order-in-models - Organize your models (more)
  • order-in-routes - Organize your routes (more)
  • order-in-controllers - Organize your controllers (more)

• Controllers

  • alias-model-in-controller - Alias your model (more)

• Ember Data

  • no-empty-attrs - Be explicit with Ember data attribute types (more)

• Components

  • closure-actions - Always use closure actions (more)

  • no-on-calls-in-components - Don't use .on() in components (more)

  • * avoid-leaking-state-in-components - Don't use objects and arrays as default properties (more)

    Example config:

    'ember/avoid-leaking-state-in-components': [1, ['array', 'of', 'ignored', 'properties']]
    

• Routing

  • routes-segments-snake-case - Route's dynamic segments should use snake case (more)
  • no-capital-letters-in-routes - Don't use capital letters in routes' names. It results in an app crash and sometimes it's not easy to spot.

* Rule with optional settings

All Rules in JSON

"ember/alias-model-in-controller": 0,
"ember/avoid-leaking-state-in-components": 0,
"ember/closure-actions": 0,
"ember/jquery-ember-run": 0,
"ember/local-modules": 0,
"ember/named-functions-in-promises": 0,
"ember/no-empty-attrs": 0,
"ember/no-function-prototype-extensions": 0,
"ember/no-observers": 0,
"ember/no-old-shims": 0,
"ember/no-on-calls-in-components": 0,
"ember/no-side-effects": 0,
"ember/order-in-components": 0,
"ember/order-in-controllers": 0,
"ember/order-in-models": 0,
"ember/order-in-routes": 0,
"ember/routes-segments-snake-case": 0,
"ember/no-capital-letters-in-routes": 0,
"ember/use-brace-expansion": 0,
"ember/use-ember-get-and-set": 0,

🍻 Contribution guide

In order to add a new rule, you should:

• generate a new rule using the official yeoman generator
• describe the rule in the generated docs file
• link to the new docs file in docs/RULES.md
• add the rule in README.md

Recommended way of creating new rules:

• Create issue on GH with description of proposed rule
• Write sufficient test scenarios
• Run yarn start
• Implement logic for the new rule
• Make sure all tests are passing
• Add documentation and update README
• Create PR and link created issue in description

Please be aware that we're using yarn in this repository, so if you plan to add some dependencies - make sure you commit yarn.lock file too.

If you have any suggestions, ideas or problems feel free to add new issue, but first please make sure your question does not repeat previous ones.

⭐️ Contributors

• Michał Sajnóg
• Rafał Leszczyński
• Adrian Zalewski
• Kamil Ejsymont
• Casey Watts
• Steve Gargan
• Alex LaFroscia
• Tobias Bieniek

🙌 Credits

• DockYard team - for great inspiration with their styleguide
• Rob Hilgefort - for making it possible to redeploy new plugin under existing eslint-plugin-ember package name

🔓 License

See the LICENSE file for license rights and limitations (MIT).