VS CODE中的WEBGL自动补全

Question

我有一个学校项目，我需要使用WEBGL。但是如果没有自动补全就很难编写所有代码。我没有找到适当的扩展名。你有想法吗？

Answer 1

为了使Visual Studio代码能够自动完成，需要知道变量的类型。

例如，如果您有这个

const gl = init();

VSCode不知道变量gl是什么类型，因此它不能自动完成。但是您可以通过在其上方添加JSDOC样式注释来告知其类型

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

现在它将自动完成

HTML元素也是如此。如果这样做

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

VSCode不知道元素的类型是什么，但是您可以告诉它

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

现在它将知道它是HTMLCanvasElement

而且，因为它知道它是HTMLCanvasElement，所以它知道.getContext('webgl')返回了WebGLRenderingContext，因此它将自动为上下文提供自动完成功能

请注意，如果再次将画布传递给某个函数，则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);

如果要记录自己的函数，例如它们的参数和返回类型，则可以查看其他JSDOC注释here。