4

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?

1 Answer 1

12

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.

1
  • As someone who came from c++ and opengl and is trying to learn js with webgl in vscode, I do very appreciate, thank you! Commented Jun 24 at 13:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.