ember-template-lint

What is ember-template-lint?

ember-template-lint is a linting tool for Ember.js templates. It helps developers maintain consistent coding styles, catch potential errors, and enforce best practices in Handlebars templates.

What are ember-template-lint's main functionalities?

Linting Templates

This feature allows you to lint your Handlebars templates to ensure they follow specific rules. For example, the 'no-bare-strings' rule prevents the use of bare strings in templates, encouraging the use of translation helpers instead.

module.exports = { 'no-bare-strings': true };

Custom Rules

You can define custom linting rules to enforce specific coding standards within your project. In this example, the 'no-inline-styles' rule is set to 'error' severity, which will flag any inline styles in templates as errors.

module.exports = { rules: { 'no-inline-styles': { severity: 'error' } } };

Configuration File

You can extend from predefined configurations to quickly set up linting rules. The 'recommended' configuration includes a set of rules that are generally considered best practices for Ember.js templates.

module.exports = { extends: 'recommended' };

Other packages similar to ember-template-lint

eslint

ESLint is a widely-used linting tool for JavaScript. It helps developers find and fix problems in their JavaScript code. While ESLint focuses on JavaScript, ember-template-lint is specifically designed for Handlebars templates in Ember.js.

stylelint

Stylelint is a linter for CSS and other stylesheets. It helps enforce consistent conventions and avoid errors in stylesheets. Like ember-template-lint, it is highly configurable, but it focuses on styles rather than Handlebars templates.

ember-cli-template-lint

ember-cli-template-lint is an older package that integrates template linting into the Ember CLI build process. It has been largely superseded by ember-template-lint, which offers more features and better integration.

README

ember-template-lint

ember-template-lint is a library that will lint your handlebars template and return error results.

For example, if the rule no-bare-strings is enabled, this template would be in violation:

{{! app/components/my-thing/template.hbs  }}
<div>A bare string</div>

When the ember-template-lint executable is run, we would have a single result indicating that the no-bare-strings rule found an error.

Requirements

• Node.js ^18.18.0 || ^20.9.0 || >=21.1.0

Installation

npm install --save-dev ember-template-lint

yarn add --dev ember-template-lint

Note: this library is installed by default with new Ember apps.

Usage

While ember-template-lint does have a Node API, the main way to use it is through its executable, which is intended to be installed locally within a project.

Basic usage is as straightforward as

ember-template-lint .

Workflow Examples

See documentation on workflow examples.

See documentation on the todo functionality.

Configuration

Project Wide

You can turn on specific rules by toggling them in a .template-lintrc.js file at the base of your project, or at a custom relative path which may be identified using the CLI:

module.exports = {
  extends: 'recommended',

  rules: {
    'no-bare-strings': true,
  },
};

For more detailed information see configuration.

Presets

	Name	Description
✅	recommended	Enables the recommended rules.
💅	stylistic	Enables stylistic rules for those who aren't ready to adopt ember-template-lint-plugin-prettier (including stylistic rules that were previously in the recommended preset in ember-template-lint v1).
⌨️	a11y	Enables A11Y rules. Its goal is to include all A11Y related rules, therefore it does not follow the same SemVer policy as the other presets. Please see versioning for more details.

Rules

Each rule has emojis denoting:

• what configuration it belongs to
• 🔧 if some problems reported by the rule are automatically fixable by the --fix command line option

Name	✅	💅	⌨️	🔧
attribute-indentation
attribute-order				🔧
block-indentation		💅		🔧
builtin-component-arguments	✅
deprecated-inline-view-helper	✅
deprecated-render-helper	✅
eol-last		💅		🔧
inline-link-to				🔧
linebreak-style		💅
link-href-attributes	✅		⌨️
link-rel-noopener	✅			🔧
modifier-name-case		💅		🔧
no-abstract-roles	✅		⌨️
no-accesskey-attribute	✅		⌨️	🔧
no-action	✅
no-action-modifiers
no-action-on-submit-button	✅
no-args-paths	✅
no-arguments-for-html-elements	✅
no-aria-hidden-body	✅		⌨️	🔧
no-aria-unsupported-elements	✅		⌨️
no-array-prototype-extensions	✅			🔧
no-at-ember-render-modifiers	✅
no-attrs-in-components	✅
no-autofocus-attribute	✅		⌨️
no-bare-strings
no-block-params-for-html-elements	✅
no-builtin-form-components	✅
no-capital-arguments	✅
no-class-bindings	✅
no-curly-component-invocation	✅			🔧
no-debugger	✅
no-duplicate-attributes	✅		⌨️	🔧
no-duplicate-id	✅		⌨️
no-duplicate-landmark-elements	✅		⌨️
no-dynamic-subexpression-invocations
no-element-event-actions
no-empty-headings	✅		⌨️
no-extra-mut-helper-argument	✅
no-forbidden-elements	✅
no-heading-inside-button	✅		⌨️
no-html-comments	✅			🔧
no-implicit-this	✅
no-index-component-invocation	✅
no-inline-styles	✅
no-input-block	✅
no-input-tagname	✅
no-invalid-aria-attributes	✅		⌨️
no-invalid-interactive	✅		⌨️
no-invalid-link-text	✅		⌨️
no-invalid-link-title	✅		⌨️
no-invalid-meta	✅		⌨️
no-invalid-role	✅		⌨️
no-link-to-positional-params	✅
no-link-to-tagname	✅
no-log	✅
no-model-argument-in-route-templates				🔧
no-multiple-empty-lines		💅		🔧
no-mut-helper
no-negated-condition	✅			🔧
no-nested-interactive	✅		⌨️
no-nested-landmark	✅		⌨️
no-nested-splattributes	✅
no-obscure-array-access	✅			🔧
no-obsolete-elements	✅		⌨️
no-outlet-outside-routes	✅
no-partial	✅
no-passed-in-event-handlers	✅
no-pointer-down-event-binding	✅		⌨️
no-positional-data-test-selectors	✅			🔧
no-positive-tabindex	✅		⌨️
no-potential-path-strings	✅
no-quoteless-attributes	✅			🔧
no-redundant-fn	✅			🔧
no-redundant-role	✅		⌨️	🔧
no-restricted-invocations
no-route-action	✅
no-scope-outside-table-headings	✅		⌨️
no-shadowed-elements	✅
no-this-in-template-only-components				🔧
no-trailing-spaces		💅		🔧
no-triple-curlies	✅
no-unbalanced-curlies	✅
no-unbound	✅
no-unknown-arguments-for-builtin-components	✅			🔧
no-unnecessary-component-helper	✅			🔧
no-unnecessary-concat		💅		🔧
no-unnecessary-curly-parens	✅			🔧
no-unnecessary-curly-strings	✅			🔧
no-unsupported-role-attributes	✅		⌨️	🔧
no-unused-block-params	✅
no-valueless-arguments	✅
no-whitespace-for-layout	✅		⌨️
no-whitespace-within-word	✅		⌨️
no-with	✅
no-yield-only	✅
no-yield-to-default	✅
quotes		💅		🔧
require-aria-activedescendant-tabindex	✅		⌨️
require-button-type	✅			🔧
require-context-role	✅		⌨️
require-each-key
require-form-method
require-has-block-helper	✅			🔧
require-iframe-title	✅		⌨️
require-input-label	✅		⌨️
require-lang-attribute	✅		⌨️
require-mandatory-role-attributes	✅		⌨️
require-media-caption	✅		⌨️
require-presentational-children	✅		⌨️
require-splattributes
require-valid-alt-text	✅		⌨️
require-valid-named-block-naming-format	✅			🔧
self-closing-void-elements		💅		🔧
simple-modifiers	✅
simple-unless	✅			🔧
splat-attributes-only	✅
style-concatenation	✅
table-groups	✅		⌨️
template-length

Supporting the --fix option

You can add a fixer to a rule. See fixer documentation for more details.

Sharing configs

It is possible to share a config (extends) or plugin (custom rules) across projects. See ember-template-lint-plugin-peopleconnect for an example.

Defining your own rules

You can define and use your own custom rules using the plugin system. See plugin documentation for more details.

Semantic Versioning Policy

The semver policy for this addon can be read here: semver policy.

Contributing

See the Contributing Guidelines for information on how to help out.

License

This project is licensed under the MIT License.

Changelog

v6.0.0-alpha.0 (2024-02-15)

:boom: Breaking Change

• #3029 Enable more recommended rules: no-action-on-submit-button, no-at-ember-render-modifiers, no-builtin-form-components, no-unnecessary-curly-parens, no-unnecessary-curly-strings, simple-modifiers (@bmish)
• #3031 Replace 4-x-recommended config with 5-x-recommended (@bmish)
• #3023 Drop support for Node 14, 16, 19 (@Techn1x)
• #2913 Add additional elements to DOCUMENT_STRUCTURE_ROLES for no-invalid-role rule (@mrloop)
• #2729 Add param to obsolete list in no-obsolete-elements rule (@geneukum)

:house: Internal

• #3024 Switch to eslint-plugin-n (@Techn1x)
• #3026 Update to eslint-plugin-unicorn v51 (@Techn1x)
• #3025 Update to prettier v3 (@Techn1x)
• #3028 Start running test that was disabled in Node 14 (@bmish)

Committers: 4

• Brad Overton (@Techn1x)
• Bryan Mishkin (@bmish)
• Ewan McDougall (@mrloop)
• Geordan Neukum (@geneukum)