Table of Contents

WebGLFundamentals.org

Fix, Fork, Contribute

How to get code completion for WebGL in Visual Studio Code

Question:

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?

Answer:

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.

The question and quoted portions thereof are CC BY-SA 4.0 by Nikola Kovač from here
Questions? Ask on stackoverflow.
Issue/Bug? Create an issue on github.
Use <pre><code>code goes here</code></pre> for code blocks
comments powered by Disqus