如何在VSCode组件悬停提示中显示格式化代码示例？

要实现VSCode悬停组件时弹出带规整代码示例的提示框，核心是用JSDoc的@example标签——这个标签专门用来添加组件使用示例，VSCode会自动对示例代码做语法高亮和格式保留。

直接看实际可复用的写法：

/**
 * 自定义文本展示组件
 * 用于在页面中展示可自定义样式的文本内容
 * @param {Object} props - 组件属性集合
 * @param {string} props.text - 必填，要展示的核心文本内容
 * @param {string} [props.color='black'] - 可选，文本颜色，默认黑色
 * @returns {JSX.Element} 渲染完成的文本组件
 * @example
 * // 基础使用示例
 * import TextComponent from './TextComponent';
 * 
 * function App() {
 *   return (
 *     <div className="app-container">
 *       <TextComponent text="Hello 自研组件" />
 *     </div>
 *   );
 * }
 * @example
 * // 自定义文本颜色的进阶用法
 * <TextComponent text="带颜色的文本" color="#2ecc71" />
 */
export default function TextComponent(props: { text: string; color?: string }) {
  return <span style={{ color: props.color || 'black' }}>{props.text}</span>;
}

关键注意点： #

• 每个@example标签对应一个独立的示例块，你可以添加多个示例覆盖不同使用场景
• 示例里的代码要保持正常缩进，VSCode会完整保留格式，同时自动识别JSX/JS语法做高亮
• 可以在示例前加注释说明（比如// 基础使用示例），让提示信息更清晰
• JSDoc的其他标签（比如@param、@returns）可以和@example配合，让悬停提示的信息更完整

这样设置后，当你在VSCode里悬停组件函数时，弹出的提示框就会显示格式化好的代码示例，和你想要的效果一致。

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