VSCode如何为<script src>引入的模块提供自动补全与文档提示

方案一：单文件快速适配（适合小型项目） #

无需修改项目配置，仅需在script.js开头添加2行代码即可：

// 关联ml-matrix的类型定义，获得自动补全和文档提示
/** @type {import('ml-matrix')} */
// @ts-ignore 忽略类型检查报错，不影响代码运行
const mlMatrix = window.mlMatrix

这段代码运行时会直接读取HTML引入的UMD包挂载到window上的mlMatrix对象，不会触发import语法错误，不需要每次预览前手动注释。

方案二：项目级全局配置（适合多文件复用） #

如果项目有多个JS文件都要用到mlMatrix，可以配置全局类型声明，一次配置所有文件生效：

• 第一步：在项目根目录新建global.d.ts类型声明文件，内容如下：

import * as _mlMatrix from 'ml-matrix'

declare global {
  const mlMatrix: typeof _mlMatrix
}
export {}

• 第二步：在项目根目录新建jsconfig.json配置文件，内容如下：

{
  "compilerOptions": {
    "target": "ESNext",
    "checkJs": true
  },
  "include": ["*.js", "*.d.ts"]
}

• 第三步：重启VSCode窗口（快捷键Ctrl+Shift+P/Command+Shift+P，选择「Reload Window」）即可生效。

原理解释 #

你安装的p5.vscode扩展已经内置了p5js的全局类型声明，所以无需额外配置就能获得补全。第三方UMD包没有对应扩展时，只要手动把模块类型关联到全局挂载的变量上，就能让VSCode识别到对应的类型定义，和你通过script标签引入的实际运行逻辑完全不冲突。

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