如何为CDN引入的全局JS脚本配置VSCode智能提示？

针对你通过CDN引入jQuery、highlight.js等库，但无npm环境、用Jekyll开发原生页面的场景，以下是几种可行的配置方法：

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

• 获取目标库的类型声明文件：主流库的类型定义基本都在DefinitelyTyped仓库中，搜索并下载对应库的index.d.ts文件（比如jQuery的类型文件）。
• 在项目根目录创建types文件夹，将下载的.d.ts文件放入该目录。
• 新建jsconfig.json文件到项目根目录，配置VSCode识别这些类型文件：

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

• 在你的本地JS文件顶部添加// @ts-check注释，开启类型检查，此时VSCode会自动加载类型文件，提供库的全局变量和方法提示。

方法2：使用类型引用注释 #

无需手动下载文件，直接在JS文件中添加类型引用注释，VSCode会自动拉取官方类型定义：

• 在本地JS文件开头添加：

// @ts-check
/// <reference types="jquery" />
/// <reference types="highlight.js" />

• 确保VSCode默认的TypeScript插件已启用，它会自动解析这些引用，生成智能提示。

方法3：通过HTML文件关联推断类型 #

利用HTML中已有的CDN脚本引入，让VSCode关联HTML与JS文件：

• 确保HTML文件中正确引入CDN脚本和你的本地JS文件：

<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/highlight.js@11.9.0/lib/common.js"></script>
<script src="./your-local-script.js"></script>

• 在本地JS文件顶部添加// @ts-check注释，VSCode会扫描关联HTML中的<script>标签，自动识别全局变量并提供提示。

如果以上方法未生效，检查VSCode设置中的javascript.implicitProjectConfig.checkJs是否已开启（可在设置面板搜索该选项）。

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