【问题标题】：Why is IntelliSense not recognizing my query selected item as an element?为什么 IntelliSense 无法将我的查询选定项识别为元素？
【发布时间】：2020-02-13 19:19:10
【问题描述】：

问题

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

document.querySelector();

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

示例

我的 HTML 文件中有一个 div 元素，其类为“list”

<div class='list'>

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

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

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

listElement.style.display = 'none';

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

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

【问题讨论】：

我猜是因为querySelector可以返回null，所以VSCode不像Web Storm那样灵活，如果不确定类型，它不会建议方法
尝试使用 TypeScript 代替：const listElement: HTMLElement = document.querySelector('.list'); 这样 VS Code 可以轻松确定要显示的属性。
您是否尝试过使用ctrl + space 这通常是智能感知显示的组合。

标签： javascript html css visual-studio-code intellisense

【解决方案1】：

VS Code 的 JavaScript IntelliSense 不知道您的 HTML 是什么样子，因此它会假定 querySelector 返回一个非常通用的对象类型。这就是为什么您看不到有关 .style 和其他一些常见 DOM 属性的建议的原因。 querySelector 返回的内容中可能不存在这些属性！

但是，您可以使用简单的JSDoc type annotation 明确告诉 VS Code querySelector 返回的元素的类型：

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

这应该会给你正确的 IntelliSense：

【讨论】：