如何在VSCode中为ESLint/Emmet添加全局类型（JavaScript环境）

方法一：通过npm包引入全局类型 #

1. 安装@webgpu/types开发依赖：

   npm install @webgpu/types --save-dev
   

2. 在项目根目录创建或修改jsconfig.json文件，添加以下配置：

   {
     "compilerOptions": {
       "checkJs": true,
       "types": ["@webgpu/types"]
     },
     "exclude": ["node_modules"]
   }
   

   开启checkJs后，VSCode会借助TypeScript的类型系统为JavaScript文件提供补全支持，types字段指定全局加载的类型包，新建JS文件就能直接获得GPUBufferUsage等WebGPU相关的类型补全。

方法二：手动添加类型声明文件 #

如果不想依赖npm包，可以手动导入类型定义：

1. 在项目根目录新建typings文件夹，创建webgpu.d.ts文件，将@webgpu/types包内的类型定义内容（可从该包的index.d.ts文件中复制）粘贴进去。
2. 修改jsconfig.json配置：

   {
     "compilerOptions": {
       "checkJs": true,
       "typeRoots": ["./typings"]
     },
     "exclude": ["node_modules"]
   }
   

   这样VSCode会从自定义的typings目录读取全局类型，同样无需在单个JS文件中添加任何特殊注释。

关键说明 #

• 上述配置均为全局生效，新建任意JS文件都能直接使用WebGPU类型的自动补全，和navigator这类原生全局对象的补全体验一致。
• 无需使用/* global someName */注释或ESLint的全局变量配置，这些方式仅能识别变量名，无法提供类型补全。

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