VS Code TypeScript项目中node_modules实现与声明文件互导航方法

我尝试过类似「在VS Code中像WebStorm一样导航到接口实现」的方法，但因为目标文件位于node_modules目录下，F12和Ctrl+F12仅能在当前文件内跳转，无法跨文件找到对应实现/声明。

目前我需要手动完成以下操作，希望能简化为快捷键或减少步骤（Windows 10系统）：

从声明文件跳转到实现文件（当前聚焦node_modules内的.d.ts文件） #

• 打开文件资源管理器
• 定位并展开node_modules目录
• 找到对应模块目录并展开
• 找到并打开index.js

从实现文件跳转到声明文件（当前聚焦node_modules内的.js文件） #

• 打开文件资源管理器
• 定位并展开node_modules目录
• 尝试展开@types目录，找到对应模块目录并展开，打开index.d.ts
• 若模块类型文件打包在实现包内：
  • 切换到其他编辑器标签，再切回当前实现文件标签，让资源管理器定位到当前目录
  • 找到并打开index.d.ts

简化方案 #

1. 用命令面板快速定位（无需鼠标操作）

• 从声明到实现：按Ctrl+P调出命令面板，输入./index.js（若当前在模块的子目录，可直接输入模块名+/index.js，如lodash/index.js），回车即可打开。
• 从实现到声明：
  • 优先检查当前模块目录是否有.d.ts文件：按Ctrl+P输入./index.d.ts回车；
  • 若类型在@types下：输入@types/[模块名]/index.d.ts（替换[模块名]为实际模块名称）回车。

2. 自定义快捷键绑定

打开键盘快捷键设置（Ctrl+K Ctrl+S），可以为以下命令绑定专属快捷键：

• Go to Type Definition：可手动绑定（如Alt+F12），用于从实现跳转到类型声明；
• Go to Implementation：绑定快捷键后尝试从声明跳转到实现，部分模块可直接生效。

3. 安装扩展增强跳转能力

• 安装Quick File Switcher扩展：可快速切换同目录下的关联文件（如index.js和index.d.ts），默认快捷键Alt+O，无需手动输入路径；
• 安装TypeScript Hero扩展：增强TypeScript的导航能力，支持跨node_modules的类型与实现跳转，配置后可通过快捷键快速切换。

4. 调整VS Code基础设置

打开设置（Ctrl+,），确保以下选项开启，提升VS Code对node_modules内模块的识别能力：

• typescript.preferences.includePackageJsonAutoImports：设置为on
• javascript.preferences.includePackageJsonAutoImports：设置为on

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