# ember/template-no-bare-strings

<!-- end auto-generated rule header -->

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:

```gjs
<template>
  <div>Hello World</div>
</template>
```

```gjs
<template>
  <button>Click me</button>
</template>
```

```gjs
<template>
  <h1>Welcome to our app</h1>
</template>
```

Examples of **correct** code for this rule:

```gjs
<template>
  <div>{{t "hello.world"}}</div>
</template>
```

```gjs
<template>
  <button>{{@buttonText}}</button>
</template>
```

```gjs
<template>
  <div>   </div>
</template>
```

## Configuration

### `allowlist`

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

```js
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"]`):

```js
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`:

```js
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"]`):

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

## References

- [eslint-plugin-ember template-no-bare-strings](https://github.com/ember-cli/eslint-plugin-ember/blob/master/docs/rules/template-no-bare-strings.md)
- [Ember Intl](https://github.com/ember-intl/ember-intl)