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

Rules are grouped by category to help you understand their purpose.

All rules below with a check mark :white_check_mark: are enabled by default while using plugin:ember/base or plugin:ember/recommended configs.

The --fix option on the command line automatically fixes problems reported by rules which have a wrench :wrench: below.

Controllers

	Rule ID	Description
:white_check_mark:	alias-model-in-controller	Enforces aliasing model in controller

Components

	Rule ID	Description
:white_check_mark:	avoid-leaking-state-in-components	Avoids state leakage
:white_check_mark:	closure-actions	Enforces usage of closure actions
:white_check_mark:	no-attrs-snapshot	Disallow use of attrs snapshot in didReceiveAttrs and didUpdateAttrs
:white_check_mark:	no-on-calls-in-components	Prevents usage of on calls in components

General

	Rule ID	Description
:white_check_mark:	jquery-ember-run	Prevents usage of jQuery without Ember Run Loop
	local-modules	Enforces usage of local modules
:white_check_mark:	named-functions-in-promises	Enforces usage of named functions in promises
	new-module-imports	Use "New Module Imports" from Ember RFC #176
	no-attrs-in-components	Disallow usage of this.attrs in components
	no-duplicate-dependent-keys	Disallow repeating dependent keys
:white_check_mark:	no-function-prototype-extensions	Prevents usage of Ember's function prototype extensions
	no-global-jquery	Prevents usage of global jQuery object
:white_check_mark:	no-observers	Prevents usage of observers
:wrench:	no-old-shims	Prevents usage of old shims for modules
:white_check_mark:	no-side-effects	Warns about unexpected side effects in computed properties
	require-super-in-init	Enforces super calls in init hooks
:white_check_mark:	use-brace-expansion	Enforces usage of brace expansion
:white_check_mark::wrench:	use-ember-get-and-set	Enforces usage of Ember.get and Ember.set

Routing

	Rule ID	Description
:white_check_mark:	no-capital-letters-in-routes	Raise an error when there is a route with uppercased letters in router.js
:white_check_mark:	routes-segments-snake-case	Enforces usage of snake_cased dynamic segments in routes

Ember Data

	Rule ID	Description
:white_check_mark:	no-empty-attrs	Prevents usage of empty attributes in ember data models

Components & tests

	Rule ID	Description
	no-jquery	Disallow any usage of jQuery

Organizing

	Rule ID	Description
:white_check_mark:	order-in-components	Enforces proper order of properties in components
:white_check_mark:	order-in-controllers	Enforces proper order of properties in controllers
:white_check_mark:	order-in-models	Enforces proper order of properties in models
:white_check_mark:	order-in-routes	Enforces proper order of properties in routes

For the simplified list of rules, go here.

🍻 Contribution guide

In order to add a new rule, you should:

• Create issue on GH with description of proposed rule
• Generate a new rule using the official yeoman generator
• Run yarn start
• Write test scenarios & implement logic
• Describe the rule in the generated docs file
• Make sure all tests are passing
• Run yarn run update in order to update readme and recommended configuration
• 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
• Robert Wagner

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

Changelog

v4.6.0 (2017-11-03)

:rocket: Enhancement

• #137 Enforce component lifecycle hook order. (@rwwagner90)

:memo: Documentation

• #154 Add myself to contributors, use https for GitHub links. (@rwwagner90)
• #153 minor typo in readme. (@zkrzyzanowski)

Committers: 3

• Robert Wagner (rwwagner90)
• Zach Krzyzanowski (zkrzyzanowski)
• shegupta