ClickOpenEditor

开发React项目时, 在浏览器中按住Option键后, 移动鼠标选中一个元素点击后, 将会自动打开你的editor, 跳转到该元素对应的文件位置.

支持的构建工具或框架

• Next.js
• Create React App
• Vite 使用了 @babel/plugin-transform-react-jsx-source 插件
• 自己配置的构建流程, 添加 @babel/plugin-transform-react-jsx-source 插件, 或者 @babel/preset-react 开启了 development 参数

支持的editor

• webstorm
• vscode

构建

使用production模式构建项目时, 自动 tree-shaking.

即使click-open-editor安装在项目的dependencies依赖中, 在production 模式构建时 tree-shaking 将会移除click-open-editor.

安装

npm install click-open-editor

使用

+import { ClickOpenEditor } from 'click-open-editor';
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>
+    <ClickOpenEditor />
     <App />
   </React.StrictMode>
 );

editor

默认打开 webstorm.

如果你想使用 vscode, 你可以设置editor:

-<ClickOpenEditor />
+<ClickOpenEditor editor="vscode" />

运行在本地

克隆项目

git clone [email protected]:fengyangfifa/click-open-editor.git

1、安装依赖

cd click-open-editor

npm install

2、运行

npm run dev

3、构建

# 进入包目录
cd packages/click-open-editor

npm run build