Skip to content
Closed
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
The table of contents is too big for display.
Diff view
Diff view
  •  
  •  
  •  
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -14,3 +14,4 @@ npm-debug.log

# eslint-remote-tester
eslint-remote-tester-results
package-lock.json
2,314 changes: 1,385 additions & 929 deletions CHANGELOG.md

Large diffs are not rendered by default.

257 changes: 220 additions & 37 deletions README.md

Large diffs are not rendered by default.

73 changes: 73 additions & 0 deletions docs/rules/template-attribute-order.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
# ember/template-attribute-order

💼 This rule is enabled in the following [configs](https://github.com/ember-cli/eslint-plugin-ember#-configurations): `strict-gjs`, `strict-gts`.

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

Enforces a consistent ordering of attributes in template elements. This helps improve readability and maintainability of templates.

## Rule Details

This rule enforces a consistent order for attributes on template elements. By default, it follows this order:

1. `class`
2. `id`
3. `role`
4. `aria-*` attributes
5. `data-test-*` attributes
6. `type`
7. `name`
8. `value`
9. `placeholder`
10. `disabled`

## Examples

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

```gjs
<template>
<div id="main" class="container"></div>
</template>
```

```gjs
<template>
<button aria-label="Submit" role="button">Send</button>
</template>
```

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

```gjs
<template>
<div class="container" id="main"></div>
</template>
```

```gjs
<template>
<button class="btn" role="button" aria-label="Submit">Send</button>
</template>
```

## Configuration

You can customize the order by providing an `order` array:

```js
module.exports = {
rules: {
'ember/template-attribute-order': [
'error',
{
order: ['class', 'id', 'role', 'aria-', 'type'],
},
],
},
};
```

## References

- [ember-template-lint attribute-order](https://github.com/ember-template-lint/ember-template-lint/blob/master/docs/rule/attribute-order.md)
79 changes: 79 additions & 0 deletions docs/rules/template-builtin-component-arguments.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@
# ember/template-builtin-component-arguments

💼 This rule is enabled in the following [configs](https://github.com/ember-cli/eslint-plugin-ember#-configurations): `strict-gjs`, `strict-gts`.

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

✅ The `extends: 'recommended'` property in a configuration file enables this rule.

The builtin `Input` component has several arguments that match attributes
of the lower-case `input` HTML element. These arguments should be set via e.g.
`@type`, instead of `type`, but it is easy to forget and can cause subtle
issues.

This rule warns about `Input` component invocations that use the following attributes instead of arguments:

- `checked`
- `type`
- `value`

The builtin `Textarea` component has several arguments that match properties
of the lower-case `textarea` HTML element. These arguments should be set via e.g.
`@value`, instead of `value`, but it is easy to forget and can cause subtle
issues.

This rule warns about `Textarea` component invocations that use the following attributes instead of arguments:

- `value`

Please note that this rule currently only warns about these three attributes on
the `Input`, and one property on the `Textarea` components, but might be extended in the future to also warn about
other attributes or builtin components.

## Examples

This rule **forbids** the following:

```hbs
<Input type='text' size='10' />
```

```hbs
<Input @type='checkbox' checked />
```

```hbs
<Textarea value="Hello, Tom!" /></Textarea>
```

This rule **allows** the following:

```hbs
<input type='text' size='10' />
```

```hbs
<Input @type='text' size='10' />
```

```hbs
<Input @type='checkbox' @checked={{true}} />
```

```hbs
<Textarea @value="Hello, Tom!" /></Textarea>
```

## Migration

- Add the `@` character in front of the relevant attributes to convert them
into component argument

## Related Rules

- [template-no-unknown-arguments-for-builtin-components](template-no-unknown-arguments-for-builtin-components.md)

## References

- [`Input` component API documentation](https://api.emberjs.com/ember/release/classes/Ember.Templates.components/methods/Input?anchor=Input)
- [`Textarea` component API documentation](https://api.emberjs.com/ember/release/classes/Ember.Templates.components/methods/Textarea?anchor=Textarea)
13 changes: 13 additions & 0 deletions docs/rules/template-deprecated-inline-view-helper.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
# ember/template-deprecated-inline-view-helper

💼 This rule is enabled in the following [configs](https://github.com/ember-cli/eslint-plugin-ember#-configurations): `strict-gjs`, `strict-gts`.

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

## Examples

See ember-template-lint documentation.

## References

- [ember-template-lint](https://github.com/ember-template-lint/ember-template-lint)
25 changes: 25 additions & 0 deletions docs/rules/template-deprecated-render-helper.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
# ember/template-deprecated-render-helper

💼 This rule is enabled in the following [configs](https://github.com/ember-cli/eslint-plugin-ember#-configurations): `strict-gjs`, `strict-gts`.

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

Disallows the {{render}} helper which is deprecated.

## Examples

Incorrect:

```gjs
<template>{{render "user"}}</template>
```

Correct:

```gjs
<template><User /></template>
```

## References

- [ember-template-lint deprecated-render-helper](https://github.com/ember-template-lint/ember-template-lint/blob/master/docs/rule/deprecated-render-helper.md)
38 changes: 38 additions & 0 deletions docs/rules/template-inline-link-to.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
# ember/template-inline-link-to

💼 This rule is enabled in the following [configs](https://github.com/ember-cli/eslint-plugin-ember#-configurations): `strict-gjs`, `strict-gts`.

🔧 This rule is automatically fixable by the [`--fix` CLI option](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix).

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

Disallows the inline form of the `link-to` component and enforces the block form instead.

Ember's `link-to` component has both an inline form and a block form. This rule forbids the inline form.

## Examples

This rule **forbids** the following (inline form):

```hbs
{{link-to 'Link text' 'routeName' prop1 prop2}}
```

This rule **allows** the following (block form):

```hbs
{{#link-to 'routeName' prop1 prop2}}Link text{{/link-to}}
```

## Rationale

The block form is a little longer but has advantages over the inline form:

- It maps closer to the use of HTML anchor tags which wrap their inner content.
- It provides an obvious way for developers to put nested markup and components inside of their link.
- The block form's argument order is more direct: "link to route". The inline form's argument order is somewhat ambiguous (link text then link target). This is opposite of the order in HTML (`href` then link text).

## References

- [Ember guides/routing](https://guides.emberjs.com/release/routing/linking-between-routes/#toc_the-linkto--component)
- [Ember api/LinkTo component](https://api.emberjs.com/ember/release/classes/Ember.Templates.components/methods/LinkTo?anchor=LinkTo)
61 changes: 61 additions & 0 deletions docs/rules/template-link-href-attributes.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
# ember/template-link-href-attributes

💼 This rule is enabled in the following [configs](https://github.com/ember-cli/eslint-plugin-ember#-configurations): `strict-gjs`, `strict-gts`.

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

Requires `href` attribute on `<a>` elements.

Anchor elements should have an `href` attribute to be properly recognized as links by browsers and assistive technologies. If an element is meant to be interactive but not navigate, use a `<button>` instead.

## Rule Details

This rule ensures that all `<a>` elements have an `href` attribute.

## Examples

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

```gjs
<template>
<a>Link</a>
</template>
```

```gjs
<template>
<a onclick={{this.handleClick}}>Click me</a>
</template>
```

```gjs
<template>
<a role="button">Action</a>
</template>
```

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

```gjs
<template>
<a href="/about">About Us</a>
</template>
```

```gjs
<template>
<a href="https://example.com">External Link</a>
</template>
```

```gjs
<template>
<button {{on "click" this.handleClick}}>Click me</button>
</template>
```

## References

- [MDN: The Anchor element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a)
- [WebAIM: Links and Hypertext](https://webaim.org/techniques/hypertext/)
- [ember-template-lint link-href-attributes](https://github.com/ember-template-lint/ember-template-lint/blob/master/docs/rule/link-href-attributes.md)
15 changes: 15 additions & 0 deletions docs/rules/template-link-rel-noopener.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
# ember/template-link-rel-noopener

💼 This rule is enabled in the following [configs](https://github.com/ember-cli/eslint-plugin-ember#-configurations): `strict-gjs`, `strict-gts`.

🔧 This rule is automatically fixable by the [`--fix` CLI option](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix).

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

## Examples

See ember-template-lint documentation.

## References

- [ember-template-lint link-rel-noopener](https://github.com/ember-template-lint/ember-template-lint/blob/master/docs/rule/link-rel-noopener.md)
49 changes: 49 additions & 0 deletions docs/rules/template-modifier-name-case.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
# ember/template-modifier-name-case

💼 This rule is enabled in the following [configs](https://github.com/ember-cli/eslint-plugin-ember#-configurations): `strict-gjs`, `strict-gts`.

🔧 This rule is automatically fixable by the [`--fix` CLI option](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix).

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

Requires dasherized names for modifiers.

Modifiers should use dasherized names when being invoked, not camelCase. This is a stylistic rule that will prevent you from using camelCase modifiers, requiring you to use dasherized modifier names instead.

## Examples

This rule **forbids** the following:

```hbs
<div {{didInsert}}></div>
```

```hbs
<div {{onFocus}}></div>
```

```hbs
<div {{modifier 'didInsert'}}></div>
```

This rule **allows** the following:

```hbs
<div {{did-insert}}></div>
```

```hbs
<div {{on-focus}}></div>
```

```hbs
<div {{modifier 'did-insert'}}></div>
```

## See Also

- [named-functions-in-promises](named-functions-in-promises.md)

## References

- [Template syntax guide - Modifiers](https://guides.emberjs.com/release/components/template-syntax/#toc_modifiers)
13 changes: 13 additions & 0 deletions docs/rules/template-no-abstract-roles.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
# ember/template-no-abstract-roles

💼 This rule is enabled in the following [configs](https://github.com/ember-cli/eslint-plugin-ember#-configurations): `strict-gjs`, `strict-gts`.

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

## Examples

See ember-template-lint documentation.

## References

- [ember-template-lint](https://github.com/ember-template-lint/ember-template-lint)
Loading
Loading