open-editor
open-editor copied to clipboard
đ A web devtools for fast find source code.
English | įŽäŊä¸æ
A web devtools for fast find source code.
Whether you are a React
developer, a Vue
developer, or a React
and Vue
developer, this development tool can help you. It can save you a lot of time looking for code, allowing you to focus more on writing code. Whether in React
or Vue
, it can achieve exactly the same effect.
Valid only during development, requires Node.js version 14+.
Features
- đ Support
React
ãNextjs
ãVue
ãNuxt
ã - đĨ Support
Rollup
ãVite
ãWebpack
ã - đšī¸ Support combined shortcut keys.
- đ¯ Support precise positioning of line and column.
- đ Support find component tree.
- đą Support mobile devices.
- đŊ Automatically opens available editors.
Usage
React
Requires React version 15+.
open-editor
needs to be used with @babel/plugin-transform-react-jsx-source
, which is a plugin for getting source code line and column information. Usually you don't have to pay attention to this thing because it is mainly built into the scaffolding tool. If you encounter the problem that open-editor
cannot open the code editor, this will It will be a way to troubleshoot the problem.
Vue
Requires Vue version 2+.
open-editor
needs to be used with unplugin-vue-source
, which is a plugin for getting source code line and column information , if this plugin is missing, the source code file will only be opened in the code editor, but line and column cannot be located.
Use plugin
The example uses
vite/react
as a reference. In other cases, the only choice is different, and the usage is exactly the same.
First you need to install the plugin into the project.
npm i @open-editor/vite -D
Then add the plugin to the build configuration.
// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import OpenEditor from '@open-editor/vite';
export default defineConfig({
plugins: [
react({
babel: {
retainLines: true,
},
}),
OpenEditor({
// options
}),
],
});
Enable inspector
First you need to get the project running.
npm run dev
At this time, open the local server address of the project in the browser, and you will see a toggle button appearing in the upper right corner of the browser. This toggle button can be used to toggle the enabled status of the inspector.
If you think that the switch button blocks your user interface, you can long press the switch button, wait for the switch button to enter the draggable state, and then adjust the display position of the switch button by dragging it.
Enable the inspector by clicking (shortcut: â¨ī¸ option âĨ + command â + O) the toggle button in the upper right corner of your browser, then, We can see the source code location information by moving the mouse over the element that needs to be inspected.
At this point, click on the element to automatically open the source code file in the code editor and locate the line and column.
At this time, you can also choose to long press (shortcut key: â¨ī¸ command â + đą click) element to view the complete component tree.
Then click on the tree node to automatically open the source code file in the code editor and locate the line and column.
Exit inspector
Click again (shortcut key 1: â¨ī¸ option âĨ + command â + O, shortcut key 2: â¨ī¸ esc, shortcut key 3: đą right-click) the switch button in the upper right corner of the browser to exit the inspector.
enableinspector
event
The default behavior of enable inspector can be changed by subscribing to the enableinspector
event.
Prevent default behavior
window.addEventListener('enableinspector', (e) => {
e.preventDefault();
});
Add additional handler
window.addEventListener('enableinspector', (e) => {
console.log('enable inspector');
});
exitinspector
event
The default behavior of exit inspector can be changed by subscribing to the exitinspector
event.
Prevent default behavior
window.addEventListener('exitinspector', (e) => {
e.preventDefault();
});
Add additional handler
window.addEventListener('exitinspector', (e) => {
console.log('exit inspector');
});
openeditor
event
The default behavior of opening an editor can be changed by subscribing to the openeditor
event.
Prevent default behavior
window.addEventListener('openeditor', (e) => {
e.preventDefault();
});
Redirect URL
window.addEventListener('openeditor', (e) => {
(e as CustomEvent<URL>).detail.hostname = '127.0.0.1';
});
Packages
Source code | NPM version | Downloads |
---|---|---|
@open-editor/rollup |
||
@open-editor/vite |
||
@open-editor/webpack |
Playgrounds
Source code | Online trial |
---|---|
rollup/react15 |
StackBlitz |
rollup/vue2 |
StackBlitz |
vite/react |
StackBlitz |
vite/vue |
StackBlitz |
webpack/nextjs |
StackBlitz |
webpack/vue |
StackBlitz |