灏天阁

点击 React 组件在 VSCode 中打开对应代码

· Yin灏

背景

在工作中接手到一个 React 项目后，这个时候你是不是特别期待有这样的一个功能，就是点击组件能立即在 VSCode 中打开代码所在的位置！

你一定需要，在不熟悉的代码中寻找对应组件的代码位置真的非常痛苦，项目的代码越复杂越是如此。

非常幸运的是，我发现了 click-to-component 这个项目，它就是用来解决这个问题的！

效果

在浏览器中通过 Option+Click  一个组件，就会立即跳转到 VSCode 相应的代码位置处。

next.gif

如何使用?

通过 npm 进行安装。

npm install click-to-react-component

尽管 click-to-react-component 被安装在了 dependencies 中，但在 production 环境，通过 tree-shaking 后会将其从最终的产出中移除。

接着你只需要按照如下形式在你的项目中进行使用即可。

+import { ClickToComponent } from 'click-to-react-component';
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';

 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>
+    <ClickToComponent />
     <App />
   </React.StrictMode>
 );

原理

那么这么酷的项目究竟是如何实现的呢？

  • 通过 URL 打开 VSCode

首先这需要 VSCode 的支持，可以通过 URL 让 VSCode 打开指定的文件并定位到具体的行和列，URL 的格式如下：

vscode://file/{full path to file}:line:column
  • 组件代码的位置信息从何而来？

那么点击一个组件后，要跳转到的文件和行列信息是从哪里来的呢？

这些信息是由 @babel/plugin-transform-react-jsx-source 这个 Babel 插件在编译时记录到 React 组件上的，当编写 JSX 如下：

<sometag />

该插件会将该组件代码所在的文件和行列信息作为 __source 属性传入 React 组件。

<sometag
  __source={{ fileName: "this/file.js", lineNumber: 10, columnNumber: 1 }}
/>

值得一提的是，该插件包含在 @babel/preset-react 这个 Babel 预设中，绝大多数的情况下并不需要我们主动添加。

如何在点击时获取代码的位置信息？

当用户点击后，我们可以通过监听点击事件获取点击的 DOM 节点。在 development 环境中，React 创建的 DOM 节点上会被添加一些额外的属性，这些属性 key 值的前缀为 __reactInternalInstance$ 或 __reactFiber，它们指向对应的 React 内部表示，即 Fiber 节点。

前面所说的传入 React 组件中的 __source 属性，Fiber 节点中存在 _debugSource 属性指向它，至此我们能够将从用户点击开始到打开 VSCode 指定文件行列结束的整个链路串联起来了。

写在最后

在工作中，开发一个不熟悉的 React 项目是常有的事情，以前我就是通过其中的文案去在 VSCode 中进行全局搜索，以此来定位组件的位置。这面临着很多问题，一些组件没有文案，一些有文案但该文案在项目中被使用到的地方非常多。

但我并没有认真思考过，是否能够有一种更加便利的方法来解决这个一般性问题。首先，机械性的重复非常恐怖，重复的多了可能就习以为常了。其次，我需要培养起一种产品思维，用户首先就是我自己，而目的是为了提升开发体验。

- Book Lists -