Skip to content

Commit 5236620

Browse files
NullVoxPopuliNullVoxPopuli
committed
Extract rule: template-no-bare-strings
1 parent a15aa2a commit 5236620

4 files changed

Lines changed: 905 additions & 16 deletions

File tree

‎README.md‎

Lines changed: 17 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -192,22 +192,23 @@ rules in templates can be disabled with eslint directives with mustache or html
192192

193193
### Best Practices
194194

195-
| Name                                       | Description | 💼 | 🔧 | 💡 |
196-
| :----------------------------------------------------------------------------------------------------- | :-------------------------------------------------------------- | :- | :- | :- |
197-
| [template-builtin-component-arguments](docs/rules/template-builtin-component-arguments.md) | disallow setting certain attributes on builtin components | | | |
198-
| [template-no-action-modifiers](docs/rules/template-no-action-modifiers.md) | disallow usage of {{action}} modifiers | | | |
199-
| [template-no-arguments-for-html-elements](docs/rules/template-no-arguments-for-html-elements.md) | disallow @arguments on HTML elements | | | |
200-
| [template-no-array-prototype-extensions](docs/rules/template-no-array-prototype-extensions.md) | disallow usage of Ember Array prototype extensions | | | |
201-
| [template-no-block-params-for-html-elements](docs/rules/template-no-block-params-for-html-elements.md) | disallow block params on HTML elements | | | |
202-
| [template-no-capital-arguments](docs/rules/template-no-capital-arguments.md) | disallow capital arguments (use lowercase @arg instead of @Arg) | | | |
203-
| [template-no-chained-this](docs/rules/template-no-chained-this.md) | disallow redundant `this.this` in templates | | 🔧 | |
204-
| [template-no-debugger](docs/rules/template-no-debugger.md) | disallow {{debugger}} in templates | | | |
205-
| [template-no-element-event-actions](docs/rules/template-no-element-event-actions.md) | disallow element event actions (use {{on}} modifier instead) | | | |
206-
| [template-no-inline-event-handlers](docs/rules/template-no-inline-event-handlers.md) | disallow DOM event handler attributes | | | |
207-
| [template-no-inline-styles](docs/rules/template-no-inline-styles.md) | disallow inline styles | | | |
208-
| [template-no-input-placeholder](docs/rules/template-no-input-placeholder.md) | disallow placeholder attribute on input elements | | | |
209-
| [template-no-input-tagname](docs/rules/template-no-input-tagname.md) | disallow tagName attribute on {{input}} helper | | | |
210-
| [template-no-log](docs/rules/template-no-log.md) | disallow {{log}} in templates | | | |
195+
| Name                                       | Description | 💼 | 🔧 | 💡 |
196+
| :----------------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------- | :- | :- | :- |
197+
| [template-builtin-component-arguments](docs/rules/template-builtin-component-arguments.md) | disallow setting certain attributes on builtin components | | | |
198+
| [template-no-action-modifiers](docs/rules/template-no-action-modifiers.md) | disallow usage of {{action}} modifiers | | | |
199+
| [template-no-arguments-for-html-elements](docs/rules/template-no-arguments-for-html-elements.md) | disallow @arguments on HTML elements | | | |
200+
| [template-no-array-prototype-extensions](docs/rules/template-no-array-prototype-extensions.md) | disallow usage of Ember Array prototype extensions | | | |
201+
| [template-no-bare-strings](docs/rules/template-no-bare-strings.md) | disallow bare strings in templates (require translation/localization) | | | |
202+
| [template-no-block-params-for-html-elements](docs/rules/template-no-block-params-for-html-elements.md) | disallow block params on HTML elements | | | |
203+
| [template-no-capital-arguments](docs/rules/template-no-capital-arguments.md) | disallow capital arguments (use lowercase @arg instead of @Arg) | | | |
204+
| [template-no-chained-this](docs/rules/template-no-chained-this.md) | disallow redundant `this.this` in templates | | 🔧 | |
205+
| [template-no-debugger](docs/rules/template-no-debugger.md) | disallow {{debugger}} in templates | | | |
206+
| [template-no-element-event-actions](docs/rules/template-no-element-event-actions.md) | disallow element event actions (use {{on}} modifier instead) | | | |
207+
| [template-no-inline-event-handlers](docs/rules/template-no-inline-event-handlers.md) | disallow DOM event handler attributes | | | |
208+
| [template-no-inline-styles](docs/rules/template-no-inline-styles.md) | disallow inline styles | | | |
209+
| [template-no-input-placeholder](docs/rules/template-no-input-placeholder.md) | disallow placeholder attribute on input elements | | | |
210+
| [template-no-input-tagname](docs/rules/template-no-input-tagname.md) | disallow tagName attribute on {{input}} helper | | | |
211+
| [template-no-log](docs/rules/template-no-log.md) | disallow {{log}} in templates | | | |
211212

212213
### Components
213214

‎docs/rules/template-no-bare-strings.md‎

Lines changed: 149 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,149 @@
1+
# ember/template-no-bare-strings
2+
3+
<!-- end auto-generated rule header -->
4+
5+
Disallows bare strings in templates to encourage internationalization.
6+
7+
Bare strings in templates make internationalization (i18n) difficult. This rule encourages using translation helpers or properties to enable easy localization of your application.
8+
9+
## Rule Details
10+
11+
This rule disallows text content in templates that isn't wrapped in a translation helper or passed as a property.
12+
13+
The following are allowed:
14+
15+
- Whitespace-only strings
16+
- Strings containing only numbers and punctuation
17+
- Strings in an allowlist (configurable)
18+
19+
## Examples
20+
21+
Examples of **incorrect** code for this rule:
22+
23+
```gjs
24+
<template>
25+
<div>Hello World</div>
26+
</template>
27+
```
28+
29+
```gjs
30+
<template>
31+
<button>Click me</button>
32+
</template>
33+
```
34+
35+
```gjs
36+
<template>
37+
<h1>Welcome to our app</h1>
38+
</template>
39+
```
40+
41+
Examples of **correct** code for this rule:
42+
43+
```gjs
44+
<template>
45+
<div>{{t "hello.world"}}</div>
46+
</template>
47+
```
48+
49+
```gjs
50+
<template>
51+
<button>{{@buttonText}}</button>
52+
</template>
53+
```
54+
55+
```gjs
56+
<template>
57+
<div>123</div>
58+
</template>
59+
```
60+
61+
```gjs
62+
<template>
63+
<div> </div>
64+
</template>
65+
```
66+
67+
## Configuration
68+
69+
### `allowlist`
70+
71+
An array of strings that are allowed to appear as bare strings:
72+
73+
```js
74+
module.exports = {
75+
rules: {
76+
'ember/template-no-bare-strings': [
77+
'error',
78+
{
79+
allowlist: ['Welcome', 'Home', 'About'],
80+
},
81+
],
82+
},
83+
};
84+
```
85+
86+
### `globalAttributes`
87+
88+
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"]`):
89+
90+
```js
91+
module.exports = {
92+
rules: {
93+
'ember/template-no-bare-strings': [
94+
'error',
95+
{
96+
globalAttributes: [
97+
'title',
98+
'aria-label',
99+
'aria-placeholder',
100+
'aria-roledescription',
101+
'aria-valuetext',
102+
],
103+
},
104+
],
105+
},
106+
};
107+
```
108+
109+
### `elementAttributes`
110+
111+
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`:
112+
113+
```js
114+
module.exports = {
115+
rules: {
116+
'ember/template-no-bare-strings': [
117+
'error',
118+
{
119+
elementAttributes: {
120+
input: ['placeholder'],
121+
img: ['alt'],
122+
},
123+
},
124+
],
125+
},
126+
};
127+
```
128+
129+
### `ignoredElements`
130+
131+
An array of element names whose text content is ignored (defaults to `["pre", "script", "style", "textarea"]`):
132+
133+
```js
134+
module.exports = {
135+
rules: {
136+
'ember/template-no-bare-strings': [
137+
'error',
138+
{
139+
ignoredElements: ['pre', 'script', 'style', 'textarea'],
140+
},
141+
],
142+
},
143+
};
144+
```
145+
146+
## References
147+
148+
- [eslint-plugin-ember template-no-bare-strings](https://github.com/ember-cli/eslint-plugin-ember/blob/master/docs/rules/template-no-bare-strings.md)
149+
- [Ember Intl](https://github.com/ember-intl/ember-intl)

0 commit comments

Comments
 (0)