VS CODE 中的 WEBGL 自动完成

我有一个学校项目，我需要使用 WEBGL。但是在没有自动补全的情况下编写所有代码是相当困难的。我没有找到合适的扩展名。你有想法吗？

为了让 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 https://jsdoc.app/如果您想记录自己的函数，例如它们的参数和返回类型。