如何在VSCode中添加自定义参数提示，展示函数各参数对应含义？

方案1：局部添加JSDoc注释（单项目生效，无额外配置） #

直接对ctx变量补充类型注释，写完即可生效：

/**
 * @type {CanvasRenderingContext2D & {
 *  drawImage: (
 *    image: CanvasImageSource, // 要绘制的图像源（图片、画布、视频等）
 *    sx: number, // 源图像裁剪起始X坐标
 *    sy: number, // 源图像裁剪起始Y坐标
 *    sWidth: number, // 源图像裁剪宽度
 *    sHeight: number, // 源图像裁剪高度
 *    dx: number, // 目标画布绘制起始X坐标
 *    dy: number, // 目标画布绘制起始Y坐标
 *    dWidth: number, // 目标画布绘制宽度
 *    dHeight: number // 目标画布绘制高度
 *  ) => void
 * }}
 */
const ctx = canvas.getContext('2d')

配置完成后输入ctx.drawImage(会自动弹出参数提示，光标移动到对应参数位置也会显示含义说明。

方案2：全局添加类型声明（所有项目生效） #

如果需要所有JS/TS项目都能触发提示，配置全局类型文件即可：

• 打开VSCode用户配置文件夹，新建global.d.ts文件，写入以下内容：

interface CanvasRenderingContext2D {
  /**
   * 9参数重载的图像绘制方法
   * @param image 要绘制的图像源（图片、画布、视频等）
   * @param sx 源图像裁剪起始X坐标
   * @param sy 源图像裁剪起始Y坐标
   * @param sWidth 源图像裁剪宽度
   * @param sHeight 源图像裁剪高度
   * @param dx 目标画布绘制起始X坐标
   * @param dy 目标画布绘制起始Y坐标
   * @param dWidth 目标画布绘制宽度
   * @param dHeight 目标画布绘制高度
   */
  drawImage(
    image: CanvasImageSource,
    sx: number,
    sy: number,
    sWidth: number,
    sHeight: number,
    dx: number,
    dy: number,
    dWidth: number,
    dHeight: number
  ): void;
}

• 在VSCodesettings.json中添加配置，让编辑器识别全局类型文件：

"js/ts.implicitProjectConfig.typeRoots": ["~/.vscode/global.d.ts"]

方案3：和现有自定义代码片段联动 #

你已经配置了自定义代码片段，可以直接修改片段规则，生成代码的同时自动带上参数提示：

• 打开你的自定义代码片段配置文件，修改drawImage对应片段：

"9参数drawImage快速生成": {
  "prefix": "drawImage9",
  "body": [
    "/** 9参数说明：sx/sy=源裁剪起点 | sWidth/sHeight=源裁剪尺寸 | dx/dy=目标绘制起点 | dWidth/dHeight=目标绘制尺寸 */",
    "ctx.drawImage(${1:image}, ${2:sx}, ${3:sy}, ${4:sWidth}, ${5:sHeight}, ${6:dx}, ${7:dy}, ${8:dWidth}, ${9:dHeight});"
  ],
  "description": "带参数提示的9参数drawImage方法"
}

输入触发前缀生成代码时，每个占位符会自动显示对应参数名，输入过程中即可看到提示，光标移入函数内部也会显示注释说明。

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