WEBGL在VS CODE中的自动完成。

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 所以它也会自动为上下文提供自动完成的功能

请注意，如果你把canvas传入某个函数，那么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注解。此处 如果你想记录你自己的函数，例如它们的参数和返回类型。