Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -206,6 +206,7 @@ rules in templates can be disabled with eslint directives with mustache or html
| [template-no-arguments-for-html-elements](docs/rules/template-no-arguments-for-html-elements.md) | disallow @arguments on HTML elements | | | |
| [template-no-array-prototype-extensions](docs/rules/template-no-array-prototype-extensions.md) | disallow usage of Ember Array prototype extensions | | | |
| [template-no-at-ember-render-modifiers](docs/rules/template-no-at-ember-render-modifiers.md) | disallow usage of @ember/render-modifiers | | | |
| [template-no-bare-strings](docs/rules/template-no-bare-strings.md) | disallow bare strings in templates (require translation/localization) | | | |
| [template-no-bare-yield](docs/rules/template-no-bare-yield.md) | disallow templates whose only meaningful content is a bare {{yield}} | | | |
| [template-no-block-params-for-html-elements](docs/rules/template-no-block-params-for-html-elements.md) | disallow block params on HTML elements | | | |
| [template-no-capital-arguments](docs/rules/template-no-capital-arguments.md) | disallow capital arguments (use lowercase @arg instead of @Arg) | | | |
Expand Down
143 changes: 143 additions & 0 deletions docs/rules/template-no-bare-strings.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,143 @@
# 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)
Loading
Loading