search

sveltejs / eslint-plugin-svelte

ESLint plugin for Svelte using AST
https://sveltejs.github.io/eslint-plugin-svelte/
MIT License
305 stars 36 forks source link

Add rule `no-link-without-base` #891

Open marekdedic opened 2 hours ago

marekdedic commented 2 hours ago

Motivation

The motivation is basically similar to #675 - when doing internal navigation, you almost always want to prepend the base path. However, unlike goto, links can also be used for external navigation. To navigate this complicated issue, I propose to only check relative links (at least by default).

Description

Add a rule that would trigger on any link without a base path. However, there are quite some edge cases

Examples

<script>
  import { base } from "$app/paths";
  import { base as whatever } from "$app/paths";
  import { goto } from "$app/navigation";
</script>

  <!-- ✓ GOOD -->
<a href={base + "/foo"}>Text</a>
<a href={`${base}/foo`}>Text</a>
<a href={whatever + "/foo"}>Text</a>
<a href={`${whatever}/foo`}>Text</a>
<a href="https://absolute.url">Text</a>

  <!-- ✗ BAD -->
<a href={"/foo"}>Text</a>
<a href={"/foo" + base}>Text</a>
<a href={`foo/${base}`}>Text</a>
</svelte>

Additional comments

Based on https://github.com/sveltejs/eslint-plugin-svelte/pull/679#issuecomment-1975067137

marekdedic commented 2 hours ago

@ota-meshi There's also pushState and replaceState - I could add a rule for them or fold them into no-goto-without-base, what do you think? Or maybe all of this could be merged into one no-navigation-without-base rule?