JavaScript require/import helper

When I create a JavaScript module, I usually spend a lot of time typing these require statements.

Whether it be CommonJS require() call:

var AwesomeWidget = require('../../src/ui/widgets/AwesomeWidget')

or an ES6 import statement:

import AwesomeWidget from '../../src/ui/widgets/AwesomeWidget'

The autocomplete-modules can help you a bit, but you still have to think and type a lot in order to import something:

• the `import` keyword
• the variable name
• the `from` keyword
• several `../..` (at this point, you have to keep track in your head where you’re currently at)

There has to be a better way.

The fuzzy-finder plugin provides a quick and easy way to navigate to files. It also has several extra hotkeys to limit to only changed files in your Git repo, or just the open buffers.

What if I could tell fuzzy-finder to, instead of navigating to that file, write an `import` statement for me?

That would be pretty cool! And with Atom, you can do that pretty easily!

There are two steps to this:

1. Define a keymap in the fuzzy finder that will invoke our custom command.
2. Create a custom command that writes the `import` statement for us.

Seems simple? Let’s go!

Setting up a keymap

I added this to my `keymap.cson` and it’s done! Simple enough.

As you can see, the command ‘custom:fuzzy-finder-import’ will be fired when you press Cmd+I when you’re focusing the name field inside the fuzzy-finder.

Creating a custom command

The easiest and most frictionless way to create a custom command is to write an init script. When invoked, it will:

1. Grab the fuzzy finder instance, and extract the selected file path.
2. Close the fuzzy finder window.
3. Obtain the active text editor’s file path.
4. Generate the require statement code.
5. Insert the generated code.

And here is the code that does it:

Strip all the comments and you are left with merely 23 lines of code.

The interesting part is in the getSelectedFilePathFromFuzzyFinderAndCloseIt function, where I use some weird hack to gain control of the fuzzy-finder, even though did not expose any service.

This where I love Atom the most — that I can hijack into the inner workings of any plugin.

(By the way, if you know a more elegant way of doing this, I’d love to hear!)

Atom is hackable to the core

By the way, I did not create an Atom package for this because of several reasons:

• There are multiple ways to import something. Maybe you include file extension, maybe you don’t. Maybe you use import, or maybe you use require. Maybe you use single quotes, maybe you use double quotes. Maybe you use semicolons, maybe you don’t. Maybe you align your `=` signs.
• The fuzzy-finder plugin did not expose any service that lets me query the selected file or close the fuzzy finder. What I did is, essentially, something I hacked up in a few minutes, and I did not consider that to be high-quality enough to publish it as an Atom package.
• It takes much more effort to create an Atom package and decide what kind of options to offer. I probably also have to write tests. But I have a lot of other problems to solve.

And that’s one thing I love about Atom. I can always edit my init script, write just enough code to get by, in a language that I know very well, and then move on to the next thing.