Skip to content

Latest commit

 

History

History
80 lines (59 loc) · 2.07 KB

File metadata and controls

80 lines (59 loc) · 2.07 KB

ember/template-no-inline-linkto

🔧 This rule is automatically fixable by the --fix CLI option.

Disallows inline form of the LinkTo component.

Rule Details

The inline form of <LinkTo> (self-closing without content) should be avoided. Use the block form instead to provide link text.

This rule also disallows the curly {{link-to}} inline form (e.g., {{link-to "text" "route"}}). The block form {{#link-to}}...{{/link-to}} or <LinkTo> angle bracket syntax should be used instead.

Examples

Examples of incorrect code for this rule:

<template>
  <LinkTo @route="index" />
</template>
<template>
  <LinkTo @route="about"></LinkTo>
</template>
<template>
  {{link-to "Link text" "routeName"}}
</template>
<template>
  {{link-to "Link text" "routeName" prop1 prop2}}
</template>

Examples of correct code for this rule:

<template>
  <LinkTo @route="index">Home</LinkTo>
</template>
<template>
  <LinkTo @route="about">
    About Us
  </LinkTo>
</template>
<template>
  {{#link-to "routeName" prop1 prop2}}Link text{{/link-to}}
</template>
// User-authored `<LinkTo>` (not from `@ember/routing`) is not flagged in
// strict mode, even when childless.
import LinkTo from './my-link-to-component';
<template>
  <LinkTo />
</template>

Strict-mode behavior

In .gjs/.gts strict mode, <LinkTo> only refers to Ember's router link when explicitly imported from @ember/routing (this also covers renamed imports such as import { LinkTo as Link } from '@ember/routing'). Without that import, <LinkTo> is treated as a user-authored component and the rule does not fire. The curly {{link-to ...}} form is unreachable in strict mode (link-to cannot be a JS identifier) and the autofix is skipped there.

References