VSCode Ctrl点击reactstrap导入项弹出引用窗口而非JS定义文件

问题复现特征 #

• 导入@types目录托管的类型包（比如@types/react对应的react）时，按住Ctrl点击导入项可以正常跳转到.d.ts类型定义文件
• 导入非@types托管的第三方包（比如reactstrap、classnames）时，点击导入项不会跳转至定义，只会弹出引用查找窗口
  异常示例代码：

  import { Nav, NavItem, Collapse } from 'reactstrap';
  import classnames from 'classnames';
  

修复步骤 #

• 首先校验依赖完整性：在项目根目录执行对应包管理器的安装命令（npm执行npm install、yarn执行yarn install、pnpm执行pnpm install），排除node_modules中对应包文件缺失、安装不完整导致的识别失败问题。
• 新增/修正项目语言服务配置：JS项目在根目录新建jsconfig.json，TS项目直接修改根目录的tsconfig.json，补充模块解析相关配置，让VSCode内置的TS语言服务可以正确找到第三方包的类型入口：

  {
    "compilerOptions": {
      "target": "ES6",
      "module": "ESNext",
      "moduleResolution": "Node",
      "allowSyntheticDefaultImports": true,
      "baseUrl": "./",
      "skipLibCheck": true
    },
    "include": ["src/**/*"],
    "exclude": ["node_modules", "dist"]
  }
  

• 重启语言服务加载配置：按下快捷键Ctrl+Shift+P（macOS系统替换为Cmd+Shift+P）调出命令面板，搜索并执行TypeScript: Restart TS Server，等待服务重载完成（一般需要1-3秒，视项目大小而定）。
• 对无内置类型的老旧包补全声明：如果执行完上面三步还是无法跳转，大概率是对应第三方包本身没有自带类型声明文件，也没有对应的@types包，可以在项目src目录下新建types文件夹，给对应包编写基础声明文件即可。以classnames为例，新建src/types/classnames.d.ts写入：

  declare module 'classnames' {
    const cn: (...args: Array<string | number | object | boolean | undefined | null>) => string;
    export default cn;
  }
  

  写完后再次重启TS服务即可生效。

验证标准 #

修复完成后，所有导入项按住Ctrl点击都会直接跳转到对应的类型定义/源码位置，不会再弹出引用查找窗口。

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