编写 JavaScript 时缺少 Visual Studio 的 IntelliSense答案

【问题标题】：Lacking IntelliSense with Visual Studio when writing JavaScript编写 JavaScript 时缺少 Visual Studio 的 IntelliSense
【发布时间】：2019-03-22 07:40:37
【问题描述】：

我正在尝试学习 JavaScript 并在 Visual Studio 中编写一些示例。但是在获取画布的上下文时，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 获得任何帮助。

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

【问题讨论】：

哪个VS版本？至少我使用的最后一次（我认为是 2015 年）在 HTML 文件上的 JS 智能感知不是很好，但在 JS 文件中却很好。
我使用 Visual Studio 2017，它在将 javascript 移动到外部 js 文件时工作。谢谢！
真棒@Kasper Hansen。祝你好运。

标签： javascript visual-studio javascript-intellisense

【解决方案1】：

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

Visual Studio 在后台使用 typescript 静态分析您的代码并猜测您使用的“类型”，从而提供智能感知。这不是一件容易的事。 JavaScript 不是一种类型化语言，坦率地说，VS 做得很好，这令人印象深刻。

但是，.getContext() 函数可以返回几种不同的类型（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 扩展）。

【讨论】：

OP没有提到使用Visual Studio Code，只是VS。
Fairpoint-尽管据我了解，这是相同的基本方法。

【解决方案2】：

最近使用 VSCode 遇到了这个问题。在 JavaScript 中让 VSCode 的智能感知将画布识别为 <canvas> 的方法是在从 DOM 获取元素时使用 inline-type-definition 注释：

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

【讨论】：