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

· 2 min read

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

效果

npm install click-to-component

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

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

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

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

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

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

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

{
  dependencies: {
    "click-to-component": "https://github.com/alanhe421/click-to-component.git#abc56dfb574efcc49cb31e14743e769c5429c85f"
  }
}

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