如何让IntelliJ/PhpStorm为自定义DOM封装函数提供HTML DOM代码补全

问题场景 #

我封装了一个简化document.getElementById的自定义函数：

function $$(elementId){ return document.getElementById(elementId); }
$$("someDOMid").style.color = "#336699";

在PhpStorm（WebStorm同理）中，原生document.getElementById和jQuery的$()都能自动补全HTML中的DOM ID，但我的自定义$$函数没有这个功能，想让IDE把它识别成原生DOM选择器调用，获得相同的补全体验。

解决方案 #

方法一：添加JSDoc类型注解 #

直接给$$函数添加JSDoc注释，明确参数和返回值的类型，让IDE识别它的用途：

/**
 * 通过ID获取DOM元素
 * @param {string} elementId HTML中的DOM ID
 * @returns {HTMLElement} 匹配的DOM元素
 */
function $$(elementId){ return document.getElementById(elementId); }

添加后，IDE会自动关联HTML中的DOM ID，在调用$$("")时弹出ID补全列表，同时还能补全返回元素的属性和方法（比如.style、.addEventListener等）。

方法二：配置IDE类型映射（全局函数适用） #

如果你的自定义函数是全局可用的，也可以通过IDE设置或类型定义文件来实现：

1. 打开Settings/Preferences（快捷键Ctrl+Alt+S）
2. 导航到Languages & Frameworks > JavaScript > Libraries，确保已添加HTML DOM相关类型库（若未添加，点击Download搜索添加）
3. 或者在项目根目录创建一个.d.ts类型定义文件，声明$$的类型：

declare function $$(elementId: string): HTMLElement;

IDE会自动识别该文件并应用类型提示。

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