Lost in code. Created tool for finding way out.

Łukasz Lityński
3 min readMay 3, 2016

--

I always get lost in code so I made tool for better navigation and code search.

It basically analyses all the code files in the project and gathers info about each of them.

Then it presents contextual information. For example breadcrumbs:

(yes. it has support for AngularJS)

Or side panel which shows all entities (functions, classes etc.) found in current file (and allows you to navigate):

(yes. it understands ES6 imports, classes, methods and JSX)

You can search.

By name:

By type:

Or by performing some weird deep search like show me object literals that have property `color` set to red”

Try yourself: https://atom.io/packages/atom-lupa :)

Also, because my plugin first indexes all the files in the project (based on filePattern in config file), you can perform project wide search (currently in separate pane item in Project Explorer):

“show me all functions in project with first argument named `err` (probably Node callbacks). “

Although I’m not satisfied with the UI/visual form of my Project Explorer right now. I think this part still requires some more additional work/design.

But it’s functional. You can explore.

For example you can click on the button `function` and browse all functions in the project (even arrow functions or ES6 methods. This would be hard with performing usual text/regexp search. My tool parses files to the AST during indexing so it can be more smart about the code).

Basically I would like to make something like seen in Smalltalk IDEs e.g in Squeak.:

Only with more modern UI :)

I just think we need better tools for exploring and understanding codebases (especially when you are new in the project, probably big one). And we need better tools for navigating and code searching :)

What do you think about this project? I would like to read some feedback.

For now it supports only JavaScript/ES6 and partially CoffeeScript, but I could consider to add support for other languages if there was a need.

Although JS and related web languages have higher priority for me right now).

I also want to improve quality of the package, fix potential bugs etc.

I created this as a package for Atom editor, but I wanna decouple this from Atom API so that I could easily port this to VSCode or make online demo (or Chrome plugin).

Package site:
url: https://atom.io/packages/atom-lupa

(I called this Lupa because it means in Polish magnifier glass 🔍 and in contrast to other Polish words it’s probably easy to pronounce for foreigners 🐶)

I would really like to hear some feedback, because I would then know that somebody really uses this. Or somebody likes the idea. Or somebody dislikes the idea etc.

hex13👻

--

--

Łukasz Lityński

Humble Programmer of JavaScript. Coffee Drinker. Foreign Language Enthusiast.