eslint-plugin-ember
An ESLint plugin that provides a set of rules for Ember applications based on commonly known good practices.
❗️Requirements
🚀 Usage
1. Install plugin
yarn add --dev eslint-plugin-ember
Or
npm install --save-dev eslint-plugin-ember
2. Update your config
const eslintPluginEmberRecommended = require('eslint-plugin-ember/configs/recommended');
module.exports = [
...eslintPluginEmberRecommended,
];
or
module.exports = {
plugins: ['ember'],
extends: [
'eslint:recommended',
'plugin:ember/recommended'
],
rules: {
'ember/no-replace-test-comments': 'error'
}
};
gts/gjs
lint files having First-Class Component Templates
(fcct)
learn more here
[!NOTE]
special care should be used when setting up parsers, since they cannot be overwritten. thus they should be used in override only and specific to file types
gjs/gts support is provided by the ember-eslint-parser
[!NOTE]
if you import .gts files in .ts files, then ember-eslint-parser
is required for .ts as well to enable typed linting
module.exports = {
overrides: [
{
files: ['**/*.{js,ts}'],
plugins: ['ember'],
parser: '@typescript-eslint/parser',
extends: [
'eslint:recommended',
'plugin:ember/recommended',
],
rules: {
'ember/no-replace-test-comments': 'error'
}
},
{
files: ['**/*.gts'],
parser: 'ember-eslint-parser',
plugins: ['ember'],
extends: [
'eslint:recommended',
'plugin:@typescript-eslint/recommended',
'plugin:ember/recommended',
'plugin:ember/recommended-gts',
],
},
{
files: ['**/*.gjs'],
parser: 'ember-eslint-parser',
plugins: ['ember'],
extends: [
'eslint:recommended',
'plugin:ember/recommended',
'plugin:ember/recommended-gjs',
],
},
{
files: ['tests/**/*.{js,ts,gjs,gts}'],
rules: {
'ember/no-replace-test-comments': 'error'
}
},
],
};
rules applied to fcct templates
- semi rule, same as prettier plugin
- no-undef rule will take effect for template vars (includes js scope)
- no-unused rule will take effect for template block params
rules in templates can be disabled with eslint directives with mustache or html comments:
<template>
<div>
{{!eslint-disable-next-line}}
{{test}}
</div>
<div>
{{!--eslint-disable--}}
{{test}}
{{test}}
{{test}}
{{!--eslint-enable--}}
</div>
</template>
<template>
<div>
<!--eslint-disable-next-line-->
{{test}}
</div>
<div>
<!-- eslint-disable -->
{{test}}
{{test}}
{{test}}
<!-- eslint-enable -->
</div>
</template>
🧰 Configurations
| Name |
---|
| base |
✅ | recommended |
| recommended-gjs |
| recommended-gts |
🍟 Rules
💼 Configurations enabled in.
✅ Set in the recommended
configuration.
Set in the recommended-gjs
configuration.
Set in the recommended-gts
configuration.
🔧 Automatically fixable by the --fix
CLI option.
💡 Manually fixable by editor suggestions.
Components
Computed Properties
Controllers
Deprecations
Ember Data
Ember Object
Ember Octane
jQuery
Miscellaneous
Routes
Services
Stylistic Issues
Testing
🍻 Contribution Guide
If you have any suggestions, ideas, or problems, feel free to create an issue, but first please make sure your question does not repeat previous ones.
Creating a New Rule
- Create an issue with a description of the proposed rule
- Create files for the new rule:
lib/rules/new-rule.js
(implementation, see no-proxies for an example)docs/rules/new-rule.md
(documentation, start from the template -- raw, rendered)tests/lib/rules/new-rule.js
(tests, see no-proxies for an example)
- Run
yarn update
to automatically update the README and other files (and re-run this if you change the rule name or description) - Make sure your changes will pass CI by running:
yarn test
yarn lint
(yarn lint:js --fix
can fix many errors)
- Create a PR and link the created issue in the description
Note that new rules should not immediately be added to the recommended configuration, as we only consider such breaking changes during major version updates.
🔓 License
See the LICENSE file for license rights and limitations (MIT).