为什么 IntelliSense 不能将我的查询选择项识别为元素？

Question

问题

我想弄清楚为什么当我访问 HTML 元素时 VSCode 的 IntelliSense 不会建议元素对象属性：

document.querySelector();

每当我使用 document.querySelector() 方法然后使用 . 运算符尝试查看所选元素的属性时，我都没有得到 CSS 属性的列表比如style

例子

我的 HTML 文件中有一个 div 元素，其中 class 'list'

<div class='list'>

在我的 .js 文件中，我可以通过以下方式访问此元素：

const listElement = document.querySelector('.list');

我的问题是，在 listElement 上使用 . 运算符时，VSCode 不显示 style 等基本属性。我仍然可以通过手动输入

之类的内容来进行设置

listElement.style.display = 'none';

但是当我使用 . 运算符时 VSCode 不建议 style 并且当我键入样式并再次使用 . 运算符时它不建议 display。我的问题是： 如何让 Intellisense 显示这些属性？

注意：我是 HTML、CSS 和 Javascript 的新手，所以我不知道我是否使用了所有正确的术语，但我试过了！

Answer 1

VS Code 的 JavaScript IntelliSense 不知道您的 HTML 是什么样子，因此它会假定 querySelector returns 是一种非常通用的对象类型。这就是为什么您看不到 .style 和一些其他常见 DOM 属性的建议。 querySelector returns!

上可能真的不存在这些属性

但是，您可以使用简单的 JSDoc type annotation:

明确告诉 VS Code querySelector returns 元素的类型

/** @type {HTMLDivElement} */
const listElement =  document.querySelector('.list');

这应该会给你正确的 IntelliSense：

为什么 IntelliSense 不能将我的查询选择项识别为元素？

Why is IntelliSense not recognizing my query selected item as an element?

html

javascript

css

intellisense

visual-studio-code

问题

例子