HTML5 canvas Visual Studio 代码中的智能感知

Question

有没有办法获得 HTML5 canvas 元素的智能感知？在 VS Code 0.7.10 中，当我在我的 JS 代码中这样写时：

context = document.getElementById(canvasId).getContext('2d');

然后当我写

context.

我的上下文没有任何智能感知帮助。

谢谢。

Answer 1

VS Code 目前不支持该问题，而且很难修复。因为 JavaScript 缺少类型注释，VS Code 尝试尽可能好地流动类型。在你的例子中 document.getElementById 打破了这个流程，因为从规范来看它可以 return 任何 html 元素（我们没有进一步了解 html 结构或 canvasId).

像这样，对VS Code会更有利：

var canvas = document.createElement('canvas'); canvas.|

或者，您可以考虑使用 TypeScript，因为您可以在其中使用类型注释和类型转换。

Answer 2

VS Code 可以支持！

只需告诉 VS Code context 是什么类型。在您的变量上添加以下代码，然后 VS Code 就会知道它是什么。抱歉，我没有足够的点数 post 图片。只需单击 solution 即可查看其工作原理。

/** @type {CanvasRenderingContext2D} */

solution

Answer 3

我使用“类型转换”：

var canvas = /** @type {HTMLCanvasElement} */ (document.querySelector('#canvas'))

然后享受基本的 Intellisense：

HTML5 canvas Visual Studio 代码中的智能感知

HTML5 canvas intellisense in Visual Studio Code

visual-studio-code