Автозаполнение WEBGL в VS CODE - PullRequest
Новая
       7

Автозаполнение WEBGL в VS CODE

0 голосов
/ 23 апреля 2020

У меня есть школьный проект, и мне нужно использовать WEBGL. Но довольно сложно написать весь код без автозаполнения. Я не нашел правильного расширения. У вас есть идеи?

1 Ответ

0 голосов
/ 23 апреля 2020

Чтобы код Visual Studio мог автоматически выполнять автозавершение, ему необходимо знать типы переменных.

Так, например, если у вас есть этот 

const gl = init();

VSCode не имеет представления о том, что введите переменную gl, чтобы она не могла завершиться автоматически. Но вы можете определить его тип, добавив над ним комментарий в стиле JSDO C, например: 

/** @type {WebGLRenderingContext} */
const gl = init();

Теперь он будет автоматически завершен

enter image description here

То же самое верно для HTML элементов. Если вы сделаете это 

const canvas = document.querySelector('#mycanvas');

VSCode не знает, что это за элемент, но вы можете сказать ему 

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

Теперь он будет знать, что это HTMLCanvasElement

enter image description here

И, поскольку он знает, что это HTMLCanvasElement, он знает, что .getContext('webgl') возвращает WebGLRenderingContext, поэтому он автоматически предложит автоматическое завершение для контекста, а также

enter image description here

Обратите внимание, что если вы передадите холст в какую-то функцию, опять же, VSCode не имеет представления, что возвращает эта функция. Другими словами 

/** @type {HTMLCanvasElement} */
const canvas = document.querySelector('#mycanvas');
const gl = someLibraryInitWebGL(canvas);

Вы не получите больше завершения с VSCode, так как не знаете, что возвращает someLibraryInitWebGL, так что следуйте правилу вверху и сообщите ему. 

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

/** @type {WebGLRenderingContext} */
const gl = someLibraryInitWebGL(canvas);

Вы можете смотрите другие JSDO C аннотации здесь , если вы хотите документировать свои собственные функции, например, их аргументы и возвращаемые типы.

...