如何让VSCode中require引入的文件补全覆盖同文件夹多JS文件？

核心思路 #

要同时满足浏览器端仅加载一次依赖和VSCode跨文件自动补全，关键是让VSCode识别共享变量的类型，同时保证变量在全局作用域唯一存在。

具体实现方法 #

1. 全局挂载+JSDoc类型声明 #

• 在文件1中，将引入的模块挂载到全局作用域（浏览器端用globalThis兼容所有环境）：

  // 文件1.js
  let foo = require("foo");
  // 挂载到全局，供文件2访问
  globalThis.foo = foo;
  

• 在文件2中，用JSDoc声明foo的类型，让VSCode识别补全：

  // 文件2.js
  /** @type {import('foo')} */
  const foo = globalThis.foo;
  
  // 此时输入foo.send就能触发补全
  foo.send
  

• 优势：无需额外配置，直接利用原生全局作用域和VSCode的类型推断，浏览器端运行时仅加载一次foo模块。

2. 用jsconfig.json配置全局类型 #

• 在项目根目录创建jsconfig.json，开启JS类型检查并指定项目范围：

  {
    "compilerOptions": {
      "checkJs": true,
      "module": "ESNext",
      "target": "ES6"
    },
    "include": ["**/*.js"]
  }
  

• 在文件1中，用JSDoc标记foo为全局变量并声明类型：

  // 文件1.js
  /** @global */
  /** @type {import('foo')} */
  let foo = require("foo");
  

• 文件2中直接使用foo即可触发补全，无需重复声明类型：

  // 文件2.js
  foo.send // 自动弹出补全提示
  

• 优势：统一管理项目类型配置，适合多文件共享全局变量的场景。

3. 适用的VSCode扩展 #

• JavaScript and TypeScript Nightly：增强VSCode对JavaScript的类型推断能力，配合JSDoc能更精准识别跨文件共享变量的补全信息。
• Path Intellisense：辅助模块路径补全，提升引入模块时的效率，间接优化整体开发体验。

注意事项 #

• 浏览器端需确保文件1先于文件2加载（HTML脚本标签顺序），否则文件2会找不到全局的foo变量。
• 原生浏览器不支持CommonJS的require语法，需要用browserify、webpack打包，或使用require.js等模块加载器实现浏览器端的require功能。

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