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:
See you next time for a new trick.