useSvelteKitResolve (HTML)

Summary

Rule available since: v2.6.0
Diagnostic Category: lint/nursery/useSvelteKitResolve
This rule doesn’t have a fix.
The default severity of this rule is information.
This rule belongs to the following domains:
- svelte
Sources:
- Same as svelte/no-navigation-without-resolve

How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "nursery": {
5
        "useSvelteKitResolve": "error"
6
      }
7
    }
8
  }
9
}

Description

Require internal navigation in SvelteKit apps to use paths built with resolve().

SvelteKit’s resolve() from $app/paths prefixes a route with the app’s base path and checks it against the app’s routes. A hand-written href breaks navigation when the app is served from a sub-path, and lets typos in routes go unnoticed.

Links are accepted when their href is an absolute URL, such as https://svelte.dev or mailto:hello@example.com, a protocol-relative URL such as //cdn.example.com, a fragment such as #top, or when the <a> element has rel="external".

This rule only checks href values it can read statically. Expressions such as href={url} aren’t checked.

Examples

Invalid

1
<a href="/foo">Click me!</a>

code-block.svelte:1:4 lint/nursery/useSvelteKitResolve ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ This link's href isn't built with resolve().
  
  > 1 │ <a href="/foo">Click me!</a>
      │    ^^^^^^^^^^^
    2 │ 
  
  ℹ Paths that aren't built with resolve() lack the app's base path, and SvelteKit can't check them against the app's routes.
  
  ℹ Wrap the path in resolve() from $app/paths. If the link leaves the app, add rel="external".
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.

1
<a href={"/foo"}>Click me!</a>

code-block.svelte:1:4 lint/nursery/useSvelteKitResolve ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ This link's href isn't built with resolve().
  
  > 1 │ <a href={"/foo"}>Click me!</a>
      │    ^^^^^^^^^^^^^
    2 │ 
  
  ℹ Paths that aren't built with resolve() lack the app's base path, and SvelteKit can't check them against the app's routes.
  
  ℹ Wrap the path in resolve() from $app/paths. If the link leaves the app, add rel="external".
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.

1
<a href="/posts/{id}">Click me!</a>

code-block.svelte:1:4 lint/nursery/useSvelteKitResolve ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ This link's href isn't built with resolve().
  
  > 1 │ <a href="/posts/{id}">Click me!</a>
      │    ^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Paths that aren't built with resolve() lack the app's base path, and SvelteKit can't check them against the app's routes.
  
  ℹ Wrap the path in resolve() from $app/paths. If the link leaves the app, add rel="external".
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.

Valid

1
<a href={resolve("/foo")}>Click me!</a>
2
<a href="https://svelte.dev">Click me!</a>
3
<a href="/foo" rel="external">Click me!</a>
4
<a href="#top">Click me!</a>

Options

`ignoreLinks`

Whether to ignore all <a> elements. Default: false.

1
{
2
  "linter": {
3
    "rules": {
4
      "nursery": {
5
        "useSvelteKitResolve": {
6
          "level": "on",
7
          "options": {
8
            "ignoreLinks": true
9
          }
10
        }
11
      }
12
    }
13
  }
14
}

1
<a href="/foo">Click me!</a>

References

resolve() documentation