在实例模式下使用p5js时使用Intellisense

Question

我正在尝试用expressjs和p5js编写一个小网站，但是我在VSCode中使用p5js和intellisense时遇到了一个令人不舒服的问题。我的问题是这样的：

我在实例模式下使用 p5js，因为我想在页面上有多个画布。要做到这一点，你需要定义这样的东西

const mySketch = (sketch) => {
  let x = 100;
  let y = 100;

  sketch.setup = () => {
    sketch.createCanvas(500, 400);
  };

  sketch.draw = () => {
    sketch.background(0);
    sketch.fill(255);
    sketch.rect(x, y, 50, 50);
  };
};

new p5(mySketch); // invoke p5

要在 VSCode 中将 Intellisense 与 p5js 结合使用，我安装了 @types/p5 并将其添加到 jsconfig.json 中

{
    "compilerOptions": {
        "target": "es6"
    },
    "include": [
        "*.js",
        "**/*.js",
        "node_modules/@types/p5/**/*"
    ]
}

这使我能够在直接调用时获取方法/函数、参数、ecc.. 的定义。 因此，如果调用

circle(10, 10, 5)

并且我将鼠标放在函数上，VSCode 会告诉我有关源自 @types/p5/ 文件夹中的 global.d.ts 文件的特定命令的文档。

在实例模式下使用 p5js 时，您不会直接调用方法本身，而是从一开始传递的（草图）参数中调用它们（例如

sketch.circle(10, 10, 5)

）。

现在：当我使用

sketch.method()

调用 @types/p5 文件夹中已有的文档时，如何才能使它们正常工作？

我尝试过像这样使用 JSDoc

/**
 *
 * @param{p5} sketch
 */
const mySketch = (sketch) => {
  s.setup = () => { }
[...]

但是没有成功。

现在，如果我将鼠标悬停在

circle()

上，我会得到：

Draws a circle to the canvas. A circle is a round shape. Every point on the edge of a circle is the same distance from its center. By default, the first two parameters set the location of the center of the circle. The third parameter sets the shape's width and height (diameter). The origin may be changed with the ellipseMode() function.

@param x — x-coordinate of the center of the circle.

@param y — y-coordinate of the center of the circle.

@param d — diameter of the circle.

@chainable

如果我对

sketch.circle()

做同样的事情，我会得到

any

。

这可能是由于我对 VSCode 的无知造成的，但我无法理解它。

如有任何帮助，我们将不胜感激。

Answer 1

您使用 JSDoc

@param {p5} sketch

所做的一切都很好。也可以写

const mySketch = (/**@type {p5}*/sketch) => {

。或者，如果您使用 TypeScript，

const mySketch = (sketch: p5) => {

。

您缺少的是类似模块导入的东西（如果它适用于您对 p5 的使用）。前任。

import p5 from "p5";

位于文件顶部。如果您不想进行实际的模块导入，请尝试在文件中的某处添加

/** @typedef {import("p5")} p5 */

。

将

"node_modules/@types/p5/**/*"

添加到 tsconfig 的

includes

属性中是没有用的。