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;

  Composable styled card wrapping a default slot.
  <SavingsCard title="Your Deposit">
      I deposited 34€ 
  class="bg-white rounded"
    class="h-10 text-white bg-brand-600 px-8"
    <slot />

And here’s how it looks like:

IDE preview
Our simple component speaks up

See you next time for a new trick.