如何让IDE识别JavaScript CDN库的符号信息以支持自动补全功能

以下方案均不需要修改生产环境的CDN加载逻辑，仅在本地开发阶段提供类型支持。

方案1：类型声明映射（无侵入，最常用） #

该方案完全不需要修改业务代码，仅通过配置让语言服务器识别CDN库的本地类型。

• 先将用到的第三方库及对应类型包安装到项目开发依赖，以lodash为例，执行pnpm add -D lodash @types/lodash，若库本身自带类型声明则无需额外安装@types/前缀包。
• 在项目根目录新建jsconfig.json文件，写入以下配置：

{
  "compilerOptions": {
    "allowJs": true,
    "checkJs": true,
    "typeRoots": ["./node_modules/@types", "./node_modules"]
  },
  "include": ["src/**/*.js"]
}

• 若CDN库是以全局变量形式挂载到window上（比如jQuery的$），额外在项目根目录新建global.d.ts文件，写入类型绑定声明：

declare var $: typeof import('jquery')

配置完成后，tsserver（VS Code和Neovim内置LSP的JS/TS语言服务均基于该服务）会自动加载本地安装的库类型，匹配代码中使用的全局变量或方法，实现补全、签名提示、诊断等功能，生产环境仍然走原有CDN逻辑。

方案2：Import Maps 兼顾ES模块导入和CDN加载 #

如果项目面向现代浏览器，可以使用Import Maps实现开发环境类型识别和生产环境CDN加载的统一。

• 还是先将用到的库安装到本地开发依赖。
• 在HTML入口文件的头部添加Import Maps配置：

<script type="importmap">
{
  "imports": {
    "lodash": "https://你的CDN地址/lodash.min.js"
  }
}
</script>

• 业务代码中用标准ES模块语法导入库：

import _ from 'lodash'

开发阶段语言服务器会自动识别本地node_modules中的库类型，生产环境浏览器会按照Import Maps的配置从指定CDN地址加载资源，无需打包工具处理。

方案3：全局库类型直接引入 #

对于常用的全局挂载类CDN库（比如jQuery、React等），可以直接在jsconfig.json中指定全局类型库，无需单独安装依赖：

{
  "compilerOptions": {
    "lib": ["esnext", "dom", "jquery"]
  }
}

大部分主流前端库的全局类型已经被内置类型库收录，添加后即可直接获得类型支持。

Neovim 额外注意事项 #

使用nvim-lspconfig配置tsserver时，不需要做额外的特殊配置，只要项目根目录存在jsconfig.json，服务会自动读取配置加载类型，行为和VS Code完全一致。

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