利用click-to-component提升开发体验

发表于 更新于 本文字数： 1k 阅读时长 ≈ 2 分钟

实际开发中，找代码的操作往往是这样，浏览器中拷贝样式或者文案，然后到IDE中搜索。有没有办法直接点击页面任意元素就直接跳转到IDE中打开对应代码文件呢，click-to-component就是这样一个工具。

效果

https://github.com/ericclemmons/click-to-component/blob/main/.github/next.gif?raw=true

安装

1
npm install click-to-component

使用

在render中添加如下代码即可，推荐使用环境变量控制IDE，这样具体开发人员自己控制打开的IDE。如果大家都一致的话，可以写死，比如vscode。

1
<ClickToComponent editor={process.env.REACT_APP_CTC_EDITOR} />

注意，ClickToComponent可以放在任意渲染位置，并不要求必须放在根组件中。

依赖

click-to-component只需要你安装并配置该组件到项目中及对应编辑器正常安装即可，不需要其它安装。

锦上添花：如果你安装了react devtools会更好，这样会提升该工具找到组件的速度。

生产打包

ClickToComponent中已经做了环境变量检查，所以生产打包时，只要确保NODE_ENV=production，就不会将ClickToComponent打包到环境中。

JetBrains IDE支持？

官方repo目前仅支持vscode/vscode-insiders/cursor，关于JB IDE的支持，我已经提交了PR，等待合并。如果你着急使用，可以直接关联commit作为版本。

1
2
3
4
5
{
  dependencies: {
    "click-to-component": "https://github.com/alanhg/click-to-component.git#abc56dfb574efcc49cb31e14743e769c5429c85f"
  }
}

JB的使用与vscode比稍微麻烦些。

  1. 需要安装JB的插件IDE Remote Control。
  2. IDE需要打开项目。

写在最后

  1. click-to-component的初衷是提升开发体验，减少开发中找代码的时间，提升开发效率。我这里已经使用了一段时间了，很喜欢，推荐大家使用下。
  2. 如果你好奇这个工具的实现，推荐查看下具体源码。

相关文档