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') return 是一个 WebGLRenderingContext 所以它也会自动为上下文提供自动完成

请注意，如果您再次将 canvas 传递给某个函数，VSCode 不知道该函数是什么 return。也就是说

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

因为不知道 someLibraryInitWebGL return 是什么，所以自从 VSCode 之后您将无法完成，所以请遵循顶部的规则并告诉它。

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

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

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

VS CODE 中的 WEBGL 自动补全

WEBGL autocompletion in VS CODE

webgl

visual-studio-code