Home

Awesome

ember-template-lint

npm version Build Status

ember-template-lint will lint your template and return error results. This is commonly used through ember-cli-template-lint which adds failing lint tests for consuming ember-cli applications.

For example, given 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 ran through the linter's verify method, we would have a single result indicating that the no-bare-strings rule found an error.

Install

To install ember-template-lint

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

Node.js >= 6 is required.

Usage

Direct usage

Run templates through the linter's verify method like so:

var TemplateLinter = require('ember-template-lint');

var linter = new TemplateLinter();
var template = fs.readFileSync('some/path/to/template.hbs', { encoding: 'utf8' });
var results = linter.verify({ source: template, moduleId: 'template.hbs' });

results will be an array of objects which have the following properties:

CLI executable

Basic ember-template-lint executable is provided, allowing for easy use within i.e. Git pre-commit/push hooks and development of appropriate plugins for text editors.

Example usage:

# basic usage
./node_modules/.bin/ember-template-lint app/templates/application.hbs

# output errors with source description
./node_modules/.bin/ember-template-lint app/templates/application.hbs --verbose

# multiple file/directory/wildcard paths are accepted
./node_modules/.bin/ember-template-lint app/templates/components/**/* app/templates/application.hbs

# output errors as pretty-printed JSON string
./node_modules/.bin/ember-template-lint app/templates/application.hbs --json

# ignore warnings / only report errors
./node_modules/.bin/ember-template-lint app/templates/application.hbs --quiet

# define custom config path
./node_modules/.bin/ember-template-lint app/templates/application.hbs --config-path .my-template-lintrc.js

# read from stdin
./node_modules/.bin/ember-template-lint --filename app/templates/application.hbs < app/templates/application.hbs

# print list of formated rules for use with `pending` in config file
./node_modules/.bin/ember-template-lint app/templates/application.hbs --print-pending

ESLint

If you are using templates inlined into your JS files, you can leverage eslint-plugin-hbs to integrate ember-template-lint into your normal eslint workflow.

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
  }
}

This extends from the builtin recommended configuration (lib/config/recommended.js), and also enables the no-bare-strings rule (see here).

Using this mechanism allows you to extend from the builtin, and modify specific rules as needed.

Some rules also allow setting additional configuration, for example if you would like to configure some "bare strings" that are allowed you might have:

module.exports = {
  rules: {
    'no-bare-strings': ['ZOMG THIS IS ALLOWED!!!!']
  }
};

Configuration Keys

The following properties are allowed in the root of the .template-lintrc.js configuration file:

Rules

Current list of rules and deprecations can be found in docs/rules.md.

Per Template File

It is also possible to disable specific rules (or all rules) in a template itself:

<!-- disable all rules -->
{{! template-lint-disable }}

<!-- disable no-bare-strings -->
{{! template-lint-disable no-bare-strings }}

<!-- disable no-bare-strings and no-triple-curlies -->
{{! template-lint-disable no-bare-strings no-triple-curlies }}

<!-- enable all rules -->
{{! template-lint-enable }}

<!-- enable no-bare-strings -->
{{! template-lint-enable no-bare-strings }}

<!-- enable no-bare-strings and no-triple-curlies -->
{{! template-lint-enable no-bare-strings no-triple-curlies }}

and to configure rules in the template:

{{! template-lint-configure no-bare-strings ["ZOMG THIS IS ALLOWED!!!!"] }}

{{! template-lint-configure no-bare-strings {"whitelist": "(),.", "globalAttributes": ["title"]} }}

The configure instruction can only configure a single rule, and the configuration value must be valid JSON that parses into a configuration for that rule.

These configuration instructions do not modify the rule for the rest of the template, but instead modify it within whatever DOM scope the comment instruction appears.

An instruction will apply to all later siblings and their descendants:

<!-- disable for <p> and <span> and their contents, but not for <div> or <hr> -->
<div>
  <hr>
  {{! template-lint-disable }}
  <p>
    <span>Hello!</span>
  </p>
</div>

An in-element instruction will apply to only that element:

<!-- enable for <p>, but not for <div>, <hr> or <span> -->
<div>
  <hr>
  <p {{! template-lint-enable }}>
    <span>Hello!</span>
  </p>
</div>

An in-element instruction with the -tree suffix will apply to that element and all its descendants:

<!-- configure for <p>, <span> and their contents, but not for <div> or <hr> -->
<div>
  <hr>
  <p {{! template-lint-configure-tree block-indentation "tab" }}>
    <span>Hello!</span>
  </p>
</div>

Note that enabling a rule ({{! template-lint-enable }}) that has been configured in-template ({{! template-lint-configure }}), will restore it to its default configuration rather than the modified in-template configuration for the scope of the {{! template-lint-enable }} instruction.

Defining your own rules

You can define and use your own custom rules using the plugin system. See plugin 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.

Contributing

A few ideas for where to take this in the future:

Installation

Running Tests