Отсутствие IntelliSense в Visual Studio при написании JavaScript

Я пытаюсь изучить 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.

Это нормально или я что-то не так делаю?


javascript visual-studio javascript-intellisense
person Kasper Hansen    schedule 17.10.2018    source источник
comment
Какая версия ВС? По крайней мере, последнее, что я использовал (думаю, это был 2015 год), было не очень хорошо с JS intellisense в файле HTML, но довольно хорошо в файле JS.   -  person Ph0b0x    schedule 17.10.2018
comment
Я использую Visual Studio 2017, и он работал при перемещении javascript во внешний файл js. Спасибо!   -  person Kasper Hansen    schedule 17.10.2018
comment
Потрясающе @Kasper Hansen. Удачи.   -  person Ph0b0x    schedule 17.10.2018

Ответы (2)


arrow_upward
1
arrow_downward

К сожалению, это ожидаемо.

Visual Studio использует машинописный текст под капотом, чтобы статически анализировать ваш код и угадывать, с каким «типом» вы работаете, и, следовательно, обеспечивать интеллигентность. Это непростая задача; 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, которое может их понять).

person thomasmichaelwallace    schedule 17.10.2018
comment
В ОП не упоминалось об использовании Visual Studio Code, только VS. - person Andrew Morton; 17.10.2018
comment
Fairpoint - хотя, насколько я понимаю, это тот же базовый подход. - person thomasmichaelwallace; 17.10.2018

arrow_upward
0
arrow_downward

Недавно столкнулся с этим с VSCode. Способ заставить VSCode intellisense распознавать холст как <canvas> в JavaScript состоял в том, чтобы использовать комментарий определения встроенного типа при получении элемента из DOM:

const canvas = /** @type {HTMLCanvasElement} */ (document.getElementById('canvas'));
person Rich Werden    schedule 28.06.2020