Lacking IntelliSense with Visual Studio when writing JavaScript

Question

I am trying to learn JavaScript and write a few examples in Visual Studio. But Intellisense stops working for me when getting the context for a canvas. The example renders fine in the browser.

<!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>

The line: "var ctx = c.getContext("2d");" results in ctx not getting IntelliSense. So font and fillText are properties and methods that I just kind of have to know in advance, not getting any help from Visual Studio.

Is that normal or am I doing something wrong?

Which VS version? At least the last I used (i think it was 2015) was not very good with JS intellisense on a HTML file but rather good in a JS file. — Ph0b0x
– Ph0b0x, Commented Oct 17, 2018 at 15:20
I use Visual Studio 2017 and it worked when moving the javascript to an external js file. Thank you! — Kasper Hansen
– Kasper Hansen, Commented Oct 17, 2018 at 16:11

thomasmichaelwallace · Accepted Answer · 2018-10-17 15:30:46Z

1

Unfortunately this is expected.

Visual Studio uses typescript under the hood to statically analyze your code and guess what 'type' your working with, and therefore provide intellisense. This is no easy task; JavaScript isn't a typed language, and frankly it's impressive that VS does this well.

However, the .getContext() function can return a few different types (https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/getContext), and CanvasRenderingContext2D is only one of them. And while we can appreciate that your string '2d' is a constant, tsc can't.

There's some hope- VS also remembers things you've done on an object, so once you've used a few properties it'll start suggesting those (although, frankly, that's bit of a double-edge sword if you misspell something!).

CanvasRenderingContext2D doesn't appear to have a constructor (https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D), which means you can't hint to tsc what you were hoping for. This is fairly common, I'm afraid.

The only alternatives I can suggest is to use TypeScript directly, or consider adding Flow to your project which allows you to use JavaScript and annotate types (inc. a vscode extension which can make sense of these).

edited Oct 17, 2018 at 15:30

answered Oct 17, 2018 at 15:26

thomasmichaelwallace

8,5721 gold badge33 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Andrew Morton Over a year ago

The OP didn't mention using Visual Studio Code, just VS.

thomasmichaelwallace Over a year ago

Fairpoint- although as far as I understand it, it's the same basic approach.

Rich Werden · Accepted Answer · 2020-06-28 20:59:57Z

1

Ran into this recently with VSCode. The way to get VSCode's intellisense to recognize the canvas as a <canvas> within JavaScript was to use the inline-type-definition comment when getting the element from the DOM:

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

answered Jun 28, 2020 at 20:59

Rich Werden

1,8971 gold badge14 silver badges11 bronze badges

Collectives™ on Stack Overflow

Lacking IntelliSense with Visual Studio when writing JavaScript

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related