0

Setting up a test workspace in visual studio code to learn webgl, using this good book https://sites.google.com/site/webglbook/

Samples are structured like this:

examples
  ch02
     HelloCanvas.html
     HelloCanvas.js
  ch03
  ...
  lib
    webgl-utils.js
    cuon-utils.js
    ...

Take for example HelloCanvas.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Clear "canvas"</title>
  </head>

  <body onload="main()">
    <canvas id="webgl" width="400" height="400">
    Please use a browser that supports "canvas"
    </canvas>

    <script src="../lib/webgl-utils.js"></script>
    <script src="../lib/webgl-debug.js"></script>
    <script src="../lib/cuon-utils.js"></script>
    <script src="HelloCanvas.js"></script>
  </body>
</html>

It contains references to external scripts.

If I open the HelloCanvas.js file

// HelloCanvas.js (c) 2012 matsuda
function main() {
  // Retrieve <canvas> element
  var canvas = document.getElementById('webgl');

  // Get the rendering context for WebGL
  var gl = getWebGLContext(canvas);
  if (!gl) {
    console.log('Failed to get the rendering context for WebGL');
    return;
  }

  // Set clear color
  gl.clearColor(0.0, 0.0, 0.0, 1.0);

  // Clear <canvas>
  gl.clear(gl.COLOR_BUFFER_BIT);
}

vscode cannot find declarations in other js files contained in the lib folder.

For example I expect vscode to be able to "Go to the declaration" of getWebGLContext that is contained in cuon-utils.js

cuon-utils.js (excerpt)

/** 
 * Initialize and get the rendering for WebGL
 * @param canvas <cavnas> element
 * @param opt_debug flag to initialize the context for debugging
 * @return the rendering context for WebGL
 */
function getWebGLContext(canvas, opt_debug) {
  // Get the rendering context for WebGL
  var gl = WebGLUtils.setupWebGL(canvas);
  if (!gl) return null;

  // if opt_debug is explicitly false, create the context for debugging
  if (arguments.length < 2 || opt_debug) {
    gl = WebGLDebugUtils.makeDebugContext(gl);
  }

  return gl;
}

So far I tried adding a jsconfig.json in the root folder or in the same folder of HelloCanvas.js

{
    "include": [ "../lib/**/*"]
}

with no success

gman
  • 100,619
  • 31
  • 269
  • 393
Federico Destefanis
  • 968
  • 1
  • 16
  • 27
  • Can you share an example declaration from under `lib`. Also please share how you are trying to reference it. Is is using a global variable? – Matt Bierner Mar 16 '20 at 20:42
  • You might find [these tutorials](https://webglfundamentals.org) useful – gman Mar 16 '20 at 21:28
  • thanks @gman, but my problem right now is in vscode, not in webgl and the examples from the book. Examples work flawlessly: I have problems in navigating them through vscode – Federico Destefanis Mar 16 '20 at 21:41
  • Yes I understand. Just pointing out some different tutorials since you're learning WebGL. As for your issue AFAICT you're out of luck. https://github.com/microsoft/vscode/issues/26338 – gman Mar 16 '20 at 21:44
  • Related: https://stackoverflow.com/questions/37039910/smart-javascript-suggestions-inside-html-files-no-loger-working-after-visual-stu , – gman Mar 16 '20 at 21:51

0 Answers0