siddharthkp / babel-plugin-open-source

Alt + Click on rendered JSX to open it's source code in VSCode

Alt + Click on rendered JSX to open it's source code in VSCode

 

install

yarn add babel-plugin-open-source --dev

 

usage

Add the plugin to your babel config.

// .babelrc
{
   "plugins": [
      "babel-plugin-open-source",
      { editor:"vscode" } // optional, default: "vscode". options: vscode | vscode-insiders | sublime | atom | phpstorm | github
    ]
}

If folks in your team use different editors, you can customise the editor just for you by adding the key BABEL_OPEN_SOURCE_EDITOR in your .env file.

---

Docs for changing babel config: Nextjs | create react app

 

like it?

⭐ this repo

 

license

MIT © siddharthkp

babel-plugin-open-source's Issues

Expecting Unicode escape sequence \uXXXX.

Please help. When i use plugin in nx.dev, this error show up.

Support component

Support jetbrains

Can you add support for jetbrains IDE or more like vim ?

For jetbrains you can do like this for url phpstorm://open?file=/Users/..../foo.js&line=24

I think, you can choose ide by .env variable and get in file with process.env.IDE_EXAMPLE_VAR_NAME === 'PhpStorm'
Default vscode if .env is not configure.

What do you think ?

Thanks in advance

[Windows] VSCode not open when alt + click

Hi. I install package with npm, set package name in babel config as packages. Open localhost site, hold alt and click LMB, opened new browser window with file url location and it close. VSCode don't open file. How i can resolve it?
OS: Windows 10

Version 1.1.0 optional chaining operator ( ?. ) make error "Unexpected token '.' "

let editor = state.opts?.editor?.toLowerCase() || 'vscode';
                              ^

SyntaxError: Unexpected token '.'
    at compileFunction (<anonymous>)

🤔 Maybe we should avoid using optional chaining in babel.js or use babel to compile babel.js before publish?

skip Fragment element like <></>

The latest version still warning Invalid prop data-source supplied to React.Fragment

Documentation on how it works.

Small docs for beginners to understand how is it actually working.

I would like to work on this if you approve this :)

Feature: support webstorm

Noticed it support phpstorm, does it support webstorm too?