zthxxx / react-dev-inspector

jump to local IDE code directly from browser React component by just a simple click
https://react-dev-inspector.zthxxx.me
MIT License
1.16k stars 68 forks source link

It might be unnecessary to setup an extension to open files in VS Code. #129

Closed EnixCoda closed 2 years ago

EnixCoda commented 2 years ago

This project is creative! Perhaps it can get rid of the extension for VS Code users to simplify the workflow.

VSCode sets up the vscode:// protocol handler that works in browsers. URLs that starts with file will be handled as Open file command. For example, a link with the URL vscode://file/Users/username/Downloads/test.txt would open /Users/username/Downloads/test.txt for you, if it exists on your drive.

zthxxx commented 2 years ago

Yes, you are right, here's a project with the same idea click-to-component

Additionally, react-dev-inspector can also config like this behavior for vscode only, without any other config.

<Inspector
  disableLaunchEditor={true}
  onClickElement={({ codeInfo }: InspectParams) => {
    if (!codeInfo?.absolutePath) return
    const { absolutePath, lineNumber, columnNumber } = codeInfo
    window.open(`vscode://file/${absolutePath}:${lineNumber}:${columnNumber}`)
  }}
/>
zthxxx commented 2 years ago

@EnixCoda thanks for proposal, I have updated the docs.

image