如何在VS Code中悬停时显示TypeScript里JSDoc指定的类型？

问题说明 #

JSDoc支持在文档注释中指定参数类型、返回类型等信息，但在VS Code中悬停带有这类注释的函数、类型别名时，当前仅展示函数体描述及TypeScript本身的类型定义，期望能在悬停弹窗的参数名称旁显示JSDoc中定义的类型信息。示例代码如下：

/**
 * A localization function returned by the {@link useLocalize} hook.
 * @param {LocalizationNames} entryName The name of the localization key.
 * @param {string?} defaultValue A default value if a localization key is not found.
 * @param {unknown} params The interpolation parameters for the localization function. E.g. `{ interpolationName: interpolationValue }`.
 * @param {boolean?} escapeValue A value indicating whether the special characters should be escaped with interpolation. The default value is `true`.
 * @returns {string} The localized string.
 */
export type LocalizeFunction = (entryName: LocalizationNames, defaultValue?: string, params?: unknown, escapeValue?: boolean) => string;

配置步骤 #

• 打开VS Code设置面板
  使用快捷键 Ctrl + ,（Windows/Linux）或 Cmd + ,（Mac）打开设置界面。

• 调整TypeScript相关设置
  在设置搜索框中输入以下选项并确认配置：

  • typescript.hover.documentation：设置为true，开启悬停时展示JSDoc文档内容。
  • typescript.preferences.includeInlayParameterNameHints：设置为all，让VS Code在悬停时关联JSDoc的类型信息并展示参数名提示。
  • typescript.suggest.completeJSDocs：开启该选项，确保VS Code能正确解析和识别JSDoc内容。

• 重启TypeScript语言服务
  如果上述设置后仍未生效，可通过命令面板重启服务：

  1. 按下 Ctrl + Shift + P（Windows/Linux）或 Cmd + Shift + P（Mac）打开命令面板
  2. 输入并执行 TypeScript: Restart TS Server 命令。

• 检查JSDoc格式
  确保JSDoc符合规范：

  • @param 标签的类型需用大括号包裹，如@param {LocalizationNames} entryName
  • 引用的类型需在当前文件或已导入的文件中存在，避免因类型未定义导致解析失败。

效果说明 #

配置完成后，悬停LocalizeFunction时，弹窗会同时展示JSDoc的描述信息，每个参数旁会显示JSDoc中定义的类型，与TypeScript的类型定义对应，满足需求中的显示效果。

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