用于 JavaScript 的 VS Code Intellisense 不起作用？答案

【问题标题】：VS Code Intellisense for JavaScript is not working?用于 JavaScript 的 VS Code Intellisense 不起作用？
【发布时间】：2022-01-06 11:47:33
【问题描述】：

我正在尝试遍历一堆按钮，以便为每个按钮提供一个事件侦听器，一旦我单击它们中的任何一个，该事件侦听器就会改变背景颜色，但是 vs 代码的 IntelliSense 不会自动完成我正在寻找的所需属性对于这样的 .style 。

code snippit

const buttons = document.querySelectorAll('btn');

for(let button of buttons) {
    button.addEventListener('click', () => {
        button.*style.backgroundColor* = 'red';
    })
}

HTML

<body>
    <section id="container">
        <button class="btn">Click me</button>
        <button class="btn">Click me</button>
        <button class="btn">Click me</button>
        <button class="btn">Click me</button>
    </section>
    <script src="app.js"></script>
</body>

VS Code intellisense 不推荐斜体代码 .style 和 .backgroundColor

块级别和范围级别以及全局级别都会发生。

【问题讨论】：

querySelectorAll('btn') 选择像 <btn></btn> 这样的所有元素。那是您的 HTML 中的内容吗？
@LucaKiebel 我有 10 个带有 btn 类的按钮。
developer.mozilla.org/en-US/docs/Web/API/Document/…
我的问题是自动完成如果我输入 btn.style vs code 在我做点符号后不会推荐样式。

标签： javascript visual-studio-code autocomplete vscode-settings intellisense

【解决方案1】：

问题是 document.querySelectorAll 被指定给你一个 NodeList 包含 Element 对象，一个通用的基类。因此，就 JavaScript IntelliSense 可以推断而言，每个button 只是Element 的一个实例。但是style property 存在于HTMLElement 上。因此，您需要“告诉” IntelliSense 引擎 buttons 将成为 NodeList 或 HTMLElement，您可以使用 JSDoc 来完成：

/** @type {NodeListOf<HTMLElement>} */
const buttons = document.querySelectorAll('btn');

for(let button of buttons) {
    button.addEventListener('click', () => {
        button.style.backgroundColor = 'red';
    })
}

【讨论】：