vscode是如何找到xxx.jsx的:vscode点击无法跳转jsx定义

问题描述

在新接手的项目中,存在vscode点击无法跳转到对应文件的情况,具体如下:
相对路径引入的xxx.jsx文件无法自动跳转,但是.js文件可以

针对这个问题,做了一个非常简单的demo来进行演示和问题的复现:github

在该项目的入口文件src/test.js中就存在这样的问题

image.png

解决方案

经过对vscode源码debug,基本了解了大致流程。得到的正确解法如下:

解法1:

删除项目目录下的jsconfig.js,可以实现jsx,js文件的自动跳转

解法2:

jsconfig.json中配置如下:

{
    "compilerOptions": {
      "jsx": "preserve", // 共有三种枚举: react, react-native, preserve,实测均可
   },
    "exclude": ["node_modules"]
}

改进解法2:

一般来讲,jsconfig.json的存在都是配合webpack alias进行快速跳转,故可以参考如下配置:

{
    "compilerOptions": {
      "jsx": "react-native",
      "baseUrl": "./",
      "paths": {
        "@/*": ["src/*"]
      }
    },
    "exclude": ["node_modules"]
}

增加了baseUrl和paths,此时代码中可以进行如下引入:

image.png

原理探究

vscode源码本地启动

此部分可以参考vscode的contribute文档。文档写的比较详尽,此处补两个点:

  1. yarn配置淘宝源,等待时间会短很多
  2. 一部分资源需要从github拉取,一般公司的命令行都会配置成gitlab的名称,可以局部修改成github的姓名邮箱。不然有部分资源会403。

vscode相关代码定位

vscode源码主要分为两部分:src, extensions。由于本身对源码不熟悉,而且也只是为了定位问题,故没有仔细查看调用链路,最终得出以下结论:
寻找jsx文件是由内置扩展: typescript-language-features提供的,具体代码可以见definitions.ts。如果想编写支持其他文件的扩展,只需要注册registerDefinitionProvider这样的方法即可,可以参考jump-definition
此处再往下追的话,会是一份typescript经过打包后的代码,故没有深究。看到这里的时候,其实可以推测进入js文件之后,左下角会出现这一个状态:

image.png

等该内置扩展加载之后,才能使用点击跳转的功能。这里可以参考该扩展的package.json:

image.png

当检测到当前文件语言是js/jsx的时候,该扩展会被激活,从而出现左下角的加载状态。

小结

这个问题解决方案是非常简单的,不过之前在网上查了很久也没有得出结论(因为我的项目下有个jsconfig.json,即便什么配置都没有也还是找不到jsx文件),迫不得已去本地debug vscode的源代码。
不过还好,最终拿到了结果,顺利解决问题。希望能够让遇到类似问题的同学少走弯路。

推荐阅读更多精彩内容