I’ve been working on what is quickly becoming a sizable svelte app recently. As the size grew, I caught myself wondering if there was a way to actually comment components and expose in VS Code the various props they require.

Turns out, you can. And it doesn’t even require any sort of a setup!

Here’s how it looks like for a SavingsCard.svelte component. (Simplified)

<script lang="ts">
    /**
    * /!\ This will be shown when hovering the prop itself when used
    * Title shown in the top section
    */
    export let title: string;
</script>

<!-- 
  @component
  Composable styled card wrapping a default slot.
  
  Usage:
    ```tsx
  <SavingsCard title="Your Deposit">
    <div>
      I deposited 34€ 
    </div>
  </SavingsCard>
  ```
 -->
<div
  class="bg-white rounded"
>
    <div
    class="h-10 text-white bg-brand-600 px-8"
    >
        <h4>{title}</h4>
    </div>
    <slot />
</div>

And here’s how it looks like:

IDE preview
Our simple component speaks up

See you next time for a new trick.