JS Bubbles

A VSCode extension for navigating and understanding
JavaScript codebases.

💡Still polishing things up but feel free to try it out and give feedback and ideas.

JSBubbles is a VSCode extension which makes it easy to find and read JavaScript without switching back and forth between multiple files.

JSBubbles is inspired by Code bubbles, few ideas of the Light table IDE and various other projects.

Getting started

Install and activate

• Install the extension from marketplace.
• Click on the icon on the top right corner of any file to open the JS Bubbles panel.

Configure and index your project

• When you open the extension, you will be prompted to configure and index your project.
• Click on "Configure project" to open the Preference panel.
  • You have to add which folders to index
  • Also, if you use path alias (like Webpack's resolve rules), make sure to add those as well.
• Then go ahead and click "Start Indexing". This will take a few minutes.

Features

Fast symbol search

Press `ctrl + f` to open the symbol search window. Search and select a symbol to bring to the stage.

You can also filter symbols by type. The search supports "type", "var", "class" and "func" as filters.

E.g: "type domain" or "func getItem" or "class View" or "var url"

Open connected symbols

Click on the markers in the bubble to open other connected symbols.

Add symbol from a file

Add symbol from file to stage.

Take notes with a note bubble

Add a note bubble and bring in other bubbles from the stage.

Contributing

Have a look at our contribution guide.