如何在VSCode中为Svelte组件添加自定义悬停文档？

直接用JSDoc注释就能实现，VSCode的官方Svelte插件会自动识别注释里的Markdown内容，在悬停组件时渲染成格式化的说明文本，完全满足你的需求。

具体步骤 #

1. 在Svelte组件的<script>块上方（或组件导出的类/变量前）添加多行JSDoc注释，用/** ... */包裹。
2. 注释内直接写Markdown格式的内容，支持标题、列表、代码块、分隔线、加粗等语法。

示例代码 #

比如你的MyComponent.svelte可以这么写：

/**
 * # MyComponent 交互组件
 * 用于配合Tailwind的`peer`类实现兄弟元素联动效果。
 * 
 * ## 核心要求
 * - 必须给该组件的**前一个兄弟元素**添加`peer`类
 * - 组件依赖Tailwind的`peer-*`工具类实现样式交互
 * 
 * ---
 * ## 可用Props
 * - `active`: 布尔值，控制组件是否处于激活状态（默认：false）
 * - `hintText`: 字符串，组件显示的提示文本（默认：""）
 * 
 * ## 示例用法
 * ```svelte
 * <!-- 前置元素必须加peer类 -->
 * <button class="peer px-4 py-2 bg-blue-500 text-white">触发按钮</button>
 * <MyComponent active={true} hintText="鼠标悬停按钮时显示我" />
 * ```
 */
<script>
	export let active = false;
	export let hintText = '';
</script>

<div class="peer-target opacity-0 peer-hover:opacity-100 transition-opacity">
	{hintText}
</div>

注意事项 #

• 确保你安装了VSCode的官方插件Svelte for VS Code，只有这个插件能正确解析Svelte组件的JSDoc注释并渲染Markdown。
• JSDoc里的Markdown语法和普通Markdown一致，不需要额外转义，插件会自动处理格式。
• 如果是导出的组件类（比如使用Svelte类写法），直接在类定义上方添加JSDoc注释即可。

内容的提问来源于stack exchange，提问作者user19485937