如何在VSCode/JSDoc中为箭头函数添加名称注解？

要让VSCode大纲识别箭头函数作为事件处理器的自定义名称，同时保留箭头函数的this上下文特性，可以通过以下两种JSDoc标注方式实现：

方法1：用@typedef定义命名函数类型 #

先定义带名称的函数类型，再将箭头函数标注为该类型，VSCode会识别这个名称并展示在大纲中：

/**
 * @typedef {function(Event): void} onMyButtonClick
 */

/**
 * @type {onMyButtonClick}
 * @param {Event} event 触发事件
 */
document.getElementById("my-button").onclick = (event) => { /* 函数逻辑 */ };

方法2：用@callback定义命名回调 #

通过@callback直接命名回调类型，再用@type关联箭头函数：

/**
 * @callback onMyButtonClick
 * @param {Event} event 触发事件
 */

/**
 * @type {onMyButtonClick}
 */
document.getElementById("my-button").onclick = (event) => { /* 函数逻辑 */ };

为什么@function标签无效？ #

@function标签主要针对函数声明（比如function foo() {}）生效，而箭头函数属于函数表达式，VSCode的JSDoc解析器不会为表达式中的箭头函数识别@function指定的名称。上述两种方法通过类型标注的方式，让编辑器识别到箭头函数对应的命名类型，从而在大纲中显示自定义名称。

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