Skip to content

template-no-bare-strings.md

Latest commit

 

History

History
143 lines (112 loc) · 2.91 KB

template-no-bare-strings.md

File metadata and controls

143 lines (112 loc) · 2.91 KB

ember/template-no-bare-strings

Disallows bare strings in templates to encourage internationalization.

Bare strings in templates make internationalization (i18n) difficult. This rule encourages using translation helpers or properties to enable easy localization of your application.

Rule Details

This rule disallows text content in templates that isn't wrapped in a translation helper or passed as a property.

The following are allowed:

  • Whitespace-only strings
  • Strings in the default allowlist (punctuation characters like (, ), ., &, etc.)
  • Strings in a custom allowlist (configurable)

Examples

Examples of incorrect code for this rule:

<template>
  <div>Hello World</div>
</template>
<template>
  <button>Click me</button>
</template>
<template>
  <h1>Welcome to our app</h1>
</template>

Examples of correct code for this rule:

<template>
  <div>{{t "hello.world"}}</div>
</template>
<template>
  <button>{{@buttonText}}</button>
</template>
<template>
  <div>   </div>
</template>

Configuration

allowlist

An array of strings that are allowed to appear as bare strings:

module.exports = {
  rules: {
    'ember/template-no-bare-strings': [
      'error',
      {
        allowlist: ['Welcome', 'Home', 'About'],
      },
    ],
  },
};

globalAttributes

An array of attribute names where bare strings will be checked globally on all elements (defaults to ["title", "aria-label", "aria-placeholder", "aria-roledescription", "aria-valuetext"]):

module.exports = {
  rules: {
    'ember/template-no-bare-strings': [
      'error',
      {
        globalAttributes: [
          'title',
          'aria-label',
          'aria-placeholder',
          'aria-roledescription',
          'aria-valuetext',
        ],
      },
    ],
  },
};

elementAttributes

An object mapping element names to arrays of attribute names to check for bare strings (defaults to { input: ["placeholder"], img: ["alt"] }). The built-in Ember components Input and Textarea also check placeholder and @placeholder:

module.exports = {
  rules: {
    'ember/template-no-bare-strings': [
      'error',
      {
        elementAttributes: {
          input: ['placeholder'],
          img: ['alt'],
        },
      },
    ],
  },
};

ignoredElements

An array of element names whose text content is ignored (defaults to ["pre", "script", "style", "textarea"]):

module.exports = {
  rules: {
    'ember/template-no-bare-strings': [
      'error',
      {
        ignoredElements: ['pre', 'script', 'style', 'textarea'],
      },
    ],
  },
};

References