eslint-plugin-ember weekly downloads statistics

eslint-plugin-ember

An ESLint plugin that provides a set of rules for Ember applications based on commonly known good practices.

❗️Requirements

• ESLint >= 8.40.0 • Node.js >= 20.19

🚀 Usage

1. Install plugin

2. Update your config

or

gts/gjs

lint files having First-Class Component Templates (fcct)

learn more at ember-template-imports

[!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

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:

Migrating from ember-template-lint

If you are replacing ember-template-lint with this plugin, use the template-lint-migration config to get the equivalent set of rules:

template-lint-migration mirrors the ember-template-lint recommended preset.

Linting .hbs files

ESLint flat config only picks up .hbs files when a files glob names them. Add a dedicated block so they route to the Handlebars parser:

Make sure no earlier @typescript-eslint/parser block's files glob reaches .hbs — narrow it to ['**/*.{js,ts,gjs,gts}'] (or similar). Flat config merges rules across every matching block, so even if our HBS block overrides the parser, type-info rules from a matching TS block still layer on and fail with errors like:

Parsing error: … was not found by the project service because the extension for the file (.hbs) is non-standard.

or

Error while loading rule @typescript-eslint/await-thenable: You have used a rule which requires type information.

Replacing template-lint-disable comments

Inline disable directives need to be rewritten to ESLint's syntax, prefixed with ember/template-. For now, only two scopes are supported: the next line, or the rest of the file. For example, replace:

with:

The template-no-template-lint-directives rule (enabled by the template-lint-migration config) does this rewrite for you: run eslint --fix once and it converts every template-lint-disable / template-lint-enable comment in your templates.

To disable a rule for an entire .gjs/.gts file, use a regular ESLint file-level directive in the JS region — it applies to the contents as well:

🧰 Configurations

| | Name |

| | base | | ✅ | recommended | | | recommended-gjs | | | recommended-gts | | 📋 | template-lint-migration |

🍟 Rules

💼 Configurations enabled in.\ ✅ Set in the recommended configuration.\ Set in the recommended-gjs configuration.\ Set in the recommended-gts configuration.\ 📋 Set in the template-lint-migration configuration.\ 🔧 Automatically fixable by the --fix CLI option.\ 💡 Manually fixable by editor suggestions.

Accessibility

| Name | Description | 💼 | 🔧 | 💡 |

| template-link-href-attributes | require href attribute on link elements | 📋 | | | | template-no-abstract-roles | disallow abstract ARIA roles | 📋 | | | | template-no-accesskey-attribute | disallow accesskey attribute | 📋 | 🔧 | | | template-no-aria-hidden-body | disallow aria-hidden on body element | 📋 | 🔧 | | | template-no-aria-unsupported-elements | disallow ARIA roles, states, and properties on elements that do not support them | 📋 | | | | template-no-autofocus-attribute | disallow autofocus attribute | 📋 | 🔧 | | | template-no-duplicate-landmark-elements | disallow duplicate landmark elements without unique labels | 📋 | | | | template-no-empty-headings | disallow empty heading elements | 📋 | | | | template-no-heading-inside-button | disallow heading elements inside button elements | 📋 | | | | template-no-invalid-aria-attributes | disallow invalid aria-* attributes | 📋 | | | | template-no-invalid-interactive | disallow non-interactive elements with interactive handlers | 📋 | | | | template-no-invalid-link-text | disallow invalid or uninformative link text content | 📋 | | | | template-no-invalid-link-title | disallow invalid title attributes on link elements | 📋 | | | | template-no-invalid-role | disallow invalid ARIA roles | 📋 | | | | template-no-nested-interactive | disallow nested interactive elements | 📋 | | | | template-no-nested-landmark | disallow nested landmark elements | 📋 | | | | template-no-pointer-down-event-binding | disallow pointer down event bindings | 📋 | | | | template-no-positive-tabindex | disallow positive tabindex values | 📋 | | | | template-no-redundant-role | disallow redundant role attributes | 📋 | 🔧 | | | template-no-unsupported-role-attributes | disallow ARIA attributes that are not supported by the element role | 📋 | 🔧 | | | template-no-whitespace-within-word | disallow excess whitespace within words (e.g. "W e l c o m e") | 📋 | | | | template-require-aria-activedescendant-tabindex | require non-interactive elements with aria-activedescendant to have tabindex | 📋 | 🔧 | | | template-require-context-role | require ARIA roles to be used in appropriate context | 📋 | | | | template-require-iframe-title | require iframe elements to have a title attribute | 📋 | | | | template-require-input-label | require label for form input elements | 📋 | | | | template-require-lang-attribute | require lang attribute on html element | 📋 | | | | template-require-mandatory-role-attributes | require mandatory ARIA attributes for ARIA roles | 📋 | | | | template-require-media-caption | require captions for audio and video elements | 📋 | | | | template-require-presentational-children | require presentational elements to only contain presentational children | 📋 | | | | template-require-valid-alt-text | require valid alt text for images and other elements | 📋 | | | | template-require-valid-form-groups | require grouped form…

Description from the npm listing.