在写入 JavaScript 时缺少 Visual Studio 的 IntelliSense

Question

我正在努力学习 JavaScript 并在 Visual Studio 中写几个例子。但是在获取 canvas 的上下文时，Intellisense 停止为我工作。该示例在浏览器中呈现良好。

<!DOCTYPE html>
<html>
<head>
    <title>Canvas with text</title>
    <meta charset="utf-8" />
</head>
<body>
    <canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
        Your browser does not support the HTML5 canvas tag.
    </canvas>
    <script>
        var c = document.getElementById("myCanvas");
        var ctx = c.getContext("2d");
        ctx.font = "30px Arial";
        ctx.fillText("Hello World", 10, 50);
    </script>
</body>
</html>

行："var ctx = c.getContext("2d");"导致 ctx 没有获得 IntelliSense。所以 font 和 fillText 是我必须提前知道的属性和方法，没有从 Visual Studio.

那里得到任何帮助

这是正常现象还是我做错了什么？

Answer 1

不幸的是，这是预料之中的。

Visual Studio 在引擎盖下使用打字稿来静态分析您的代码并猜测 'type' 您正在使用什么，因此提供智能感知。这不是一件容易的事。 JavaScript不是类型化语言，坦率地说，VS 能做到这一点令人印象深刻。

但是，.getContext() 函数可以 return 几种不同的类型 (https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/getContext)，而 CanvasRenderingContext2D 只是其中之一。虽然我们可以理解您的字符串 '2d' 是一个常量，但 tsc 不能。

有一些希望 - VS 还会记住您在对象上所做的事情，所以一旦您使用了一些属性，它就会开始建议那些（尽管坦率地说，如果你拼错了！）。

CanvasRenderingContext2D 似乎没有构造函数 (https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D)，这意味着您无法向 tsc 暗示您希望得到什么。恐怕这很常见。

我可以建议的唯一替代方法是直接使用 TypeScript，或者考虑将 Flow 添加到您的项目中，这样您就可以使用 JavaScript 和注释类型（包括 vscode 扩展，它可以使这些的意义）。

Answer 2

运行最近和VSCode一起进入了这个。让 VSCode 的智能感知将 canvas 识别为 JavaScript 中的 <canvas> 的方法是在从 DOM:

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

在写入 JavaScript 时缺少 Visual Studio 的 IntelliSense

Lacking IntelliSense with Visual Studio when writing JavaScript

javascript

visual-studio

javascript-intellisense