如何让Visual Studio Code跳转到React组件的源文件？

我太懂这种麻烦了——管理一堆组件的时候，每次想跳转到组件源文件却只能到导入声明，来回折腾真的太影响效率！下面是几个亲测有效的解决办法，帮你快速搞定这个问题：

1. 配置项目的模块解析规则（关键！） #

VS Code需要明确知道你的别名和文件路径对应关系，所以首先要在项目根目录添加jsconfig.json（JS项目）或者tsconfig.json（TS项目），以你的例子为例，配置可以这样写：

对于JavaScript项目（jsconfig.json） #

{
  "compilerOptions": {
    "baseUrl": ".", // 项目根目录
    "paths": {
      "components/*": ["src/components/*"] // 映射你的组件别名到实际路径
    }
  },
  "include": ["src/**/*"] // 包含所有源文件，让VS Code能索引到
}

对于TypeScript项目（tsconfig.json） #

在原有配置基础上，确保添加或开启这些选项：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "components/*": ["src/components/*"]
    },
    "esModuleInterop": true,
    "resolveJsonModule": true,
    "moduleResolution": "node"
  },
  "include": ["src/**/*"]
}

配置好之后，VS Code就能正确识别components/Popup/Popup对应的实际文件路径了。

2. 用「转到实现」替代「转到定义」 #

有时候默认的「转到定义」（F12）会优先指向导入声明，这时候可以试试「转到实现」（快捷键Ctrl+F12，Mac是Cmd+F12）。这个功能会直接定位到组件的实际实现文件，而不是导入语句，对React组件来说往往更实用。

3. 刷新VS Code缓存 #

有时候VS Code的索引缓存会出问题，导致跳转失效。可以按Ctrl+Shift+P（Mac是Cmd+Shift+P）打开命令面板，输入「Reload Window」重新加载窗口，之后再试试跳转功能。

4. 检查VS Code插件状态 #

确保你安装的「JavaScript and TypeScript Nightly」或者默认的「TypeScript Language Features」插件是最新版本，旧版本可能存在解析bug。如果插件很久没更，更新后再重启VS Code试试。

按照上面的步骤操作后，你再点击Popup组件或者导入语句里的路径，应该就能直接跳转到components/Popup/Popup的源文件了，遍历组件堆栈会顺畅很多！

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