IntelliJ / PhpStorm 中 JavaScript 字符串文字中 HTML DOM 的代码完成

Question

我正在使用一个自定义框架，它可以像这样缩短

document.getElementById

：

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

我正在使用 JetBrains IntelliJ / PhpStorm（尽管我认为这也适用于 WebStorm）。

我注意到，在 IDE 中，HTML DOM id 的代码完成显示在

document.getElementId

以及 jQuery 的

$("#someId")

函数中。

如何让 PhpStorm 识别 my 框架的包装器，就像本机调用一样，从而获得那些非常方便的 DOM 代码完成？

Answer 1

jQuery 的

$("#someId")

如果你想要 jQuery 风格，你需要在 ID 之前有

#

（就像引用的示例一样），那么这根本不是问题。我们将执行与 querySelector()

 和 

querySelectorAll()

 相同的操作。

1. 前往

   Settings/Preferences | Editor | Language Injections

2. 找到

   js: DOM Element selectors

   条目。

3. 克隆它（使用其上的

   Duplicate

   图标按钮）。

   注意：我始终建议制定自己的规则，而不是修改现有的捆绑规则（如果不需要，请禁用原始规则）。这样您就可以看到捆绑包中的更新+减少“为什么它对我不起作用”的情况。

4. 现在打开克隆的条目。它将在“范围”列中显示“IDE”或“项目”（而原始捆绑条目将在此处显示“内置”）

5. 为其指定一个新名称（例如

   Custom $$

   ）并调整图案。超级简单——只需使用 

   "$$"

    而不是默认的 

   "querySelector", "querySelectorAll", "closest"

6. 保存并关闭

7. 返回编辑器测试一下。

（此处的数字与上面列表中的步骤并不完全对应）

这里看起来不错：

---

如果您想拥有它，而不需要在 ID 之前出现

#

（类似于 

document.getElementId

）...那么只需在 

Prefix

 字段中添加该符号 - 就可以了。

在我的任务测试中似乎工作正常：