html dom api 提示的最佳 vscode 扩展是什么？

Question

我正在编写 html 文件。怎么得到

Ctrl+Shift+空格不起作用

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

ctx.fillText?

Answer 1

VSCode 对 Web 开发提供出色的开箱即用支持。

问题是，当您使用

id

或

css class

从 HTML DOM 树中获取元素时，该元素将作为 HTMLElement 或 Element

获取

由于

id

或

class

可以应用于任何元素，因此 VSCode 不知道正在获取的元素的类型。

为了确保 VSCode 知道元素的类型，可以采用以下两种方法之一：

1.使用注释指定要获取的元素的类型

您可以通过 TypeDefinition 注释指定所使用的元素的类型，VSCode 会解析这些注释并分配正确的值

在您的情况下，通过将类型

HTMLCanvasElement

分配给

canvas

，VSCode 将为 HTMLCanvasElement 提供类型完成。

/** @type {HTMLCanvasElement} */
var canvas = document.getElementById('myCanvas');

2.使用

document.querySelector

显式指定要获取的元素

如果我们在使用 css 查询选择器时显式指定元素的类型，VSCode 就能够推断出正在获取的元素的类型。

在您的情况下，我们将使用查询选择器

canvas#myCanvas

来获取画布

var canvas = document.querySelector('canvas#myCanvas');

这样 VSCode 就知道在

HTMLCanvasElement

中获取的元素，并且它将分配适当的类型。