Svelte Cursor Rules

Svelte-Specific Rules

Cursor rules in Svelte provide intelligent navigation and manipulation capabilities designed specifically for Svelte development. These rules help you work more efficiently with Svelte components, reactive statements, stores, and transitions.

Component Navigation

• Navigate between script, style, and markup sections
• Jump to reactive statement declarations
• Move between component props and events
• Quick access to store subscriptions

Smart Selection

• Select reactive blocks and expressions
• Expand selection to include transitions
• Smart prop and event handler selection
• Store mutation selection

Code Manipulation

• Quick component insertion
• Automated reactive statement handling
• Store subscription management
• Transition effect handling

Best Practices

• Use reactive-aware navigation
• Leverage transition-specific cursor movements
• Utilize store-aware selection
• Navigate efficiently between component sections

Examples

<script>
  import { writable } from 'svelte/store';
  import { fade } from 'svelte/transition';

  export let user;
  
  const count = writable(0);
  $: doubled = $count * 2;

  function handleIncrement() {
    $count += 1;
  }
</script>

<div class="user-profile" transition:fade>
  <h1>{user.name}</h1>
  <button on:click={handleIncrement}>
    Count: {$count}
  </button>
  <p>Doubled: {doubled}</p>
</div>

<style>
  .user-profile {
    padding: 1rem;
    margin: 0.5rem;
  }
</style>

Configuration

Customize Svelte-specific cursor rules in your settings:

{
  "svelte.cursorRules": {
    "componentNavigation": true,
    "smartSelection": true,
    "reactiveHandling": true,
    "transitionSupport": true
  }
}