Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

WEBGL autocompletion in VS CODE

Tags:

webgl

vs-code

I have a school project and i need to use WEBGL. But its pretty difficult to write all the code without autocompletion. I didn't find proper extension. Do you have ideas?

like image 220
Nikola Kovač Avatar asked Aug 31 '26 05:08

Nikola Kovač


1 Answers

In order for visual studio code to give you auto completion it needs to know the types of variables.

So for example if you have this

const gl = init();

VSCode has no idea what type the variable gl is so it can't auto complete. But you can tell it the type by adding a JSDOC style comment above it like this

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

Now it will auto complete

enter image description here

The same is true for HTML elements. If you do this

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

VSCode has no idea what type of element that is but you can tell it

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

Now it will know it's an HTMLCanvasElement

enter image description here

And, because it knows it's an HTMLCanvasElement it knows that .getContext('webgl') returns a WebGLRenderingContext so it will automatically offer auto completion for the context as well

enter image description here

Note that if you're pass the canvas into some function then again, VSCode has no idea what that function returns. In otherwords

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

You won't get completion anymore since VSCode as no idea what someLibraryInitWebGL returns so follow the rule at the top and tell it.

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

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

You can see other JSDOC annotations here if you want to document your own functions, for example their argument and return types.


Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!