如何在VSCode中为实例模式下的p5.js启用IntelliSense？

核心问题 #

VSCode无法自动推断实例模式中sketch参数的类型，导致调用sketch.xxx时仅显示any类型，无法触发代码提示。

具体解决方案 #

1. 用JSDoc显式标注sketch的类型 #

给你的sketch函数参数加上@param {p5}注释，明确告诉VSCode这个参数是p5的实例对象：

/**
 * @param {p5} sketch
 */
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);
    // 此时sketch.circle应该能正常触发文档提示
    sketch.circle(x + 75, y + 25, 50);
  };
};

new p5(mySketch);

2. 优化jsconfig.json配置 #

调整配置开启JS类型检查，并明确引入p5类型：

{
  "compilerOptions": {
    "target": "es6",
    "checkJs": true, // 开启JS文件的类型检查，增强IntelliSense能力
    "types": ["p5"] // 明确引入p5的类型定义
  },
  "include": [
    "*.js",
    "**/*.js"
  ]
}

注：无需在include中添加node_modules/@types/p5/**/*，types字段会自动加载对应的类型文件。

3. 重启VSCode或重载窗口 #

修改配置后，按Ctrl+Shift+P（Windows/Linux）或Cmd+Shift+P（Mac），选择Reload Window，让配置生效。

为什么之前的JSDoc没生效？ #

大概率是因为你没有开启checkJs选项，VSCode默认不会对JS文件启用严格的类型推断；或者JSDoc中标注的类型不正确（比如没写{p5}而是其他错误类型）。

内容的提问来源于stack exchange，提问作者pava