Autocompletion for ES2015 imports! OMG!

In ES2015, we find ourselves writing this type of thing an insane amount of times throughout each day.

Disclaimer: I’m a devoted fan of the JetBrains IDEs and this is specific to them. I use IntelliJ but this would apply to any variation that supports JavaScript. I’m sure you can do similar tricks in other editors, if you know how — please share!

The Problem

The new import syntax is great for a variety of reasons but one of my biggest complaints has been that my IDE is helpless when it comes to autocompletion of named exports. It’s simply a matter of the order in which the import statement is written. Example:

If you’re anything like me, the repetition of writing the above code had been maddening on some deep level but also something you deal with because it doesn’t seem worth the effort to do anything about.

I find, however, that these type of the annoyances are also the most rewarding to solve because they help you every day.

The Tip

JetBrains IDEs share a feature called Live Templates which allow you to create smart code snippets that are triggered by a simple abbreviation and keypress. We’re going to make a live template which inserts the import statement above but allows us to fill it out backwards so that the IDE can intelligently suggest options along the way.

Here’s the summary of what just happened:

  1. Open your Jetbrains IDE’s settings page
  2. Navigate to Editor > Live Templates
  3. Select JavaScript from the contexts listed
  4. Click the plus button on the right side of the list
  5. Enter the template text import { $IMPORT$ } from '$LIB$’;
  6. Click the Edit Variables button and move $LIB$ up so that it will be filled first
  7. Click the Define link to set the context in which your live template will be available

The Result

Now that the Live Template is configured, you can jump into declaring imports using your new shorthand! Within a JS file, just type imp and press Tab. The snippet will be entered in your file and the cursor will be set within the quotes. Enter your package or module name, then press Tab to move the cursor into the curly braces. Then begin typing or press Ctrl+Space to bring up the IDE’s suggestions.

Now you can enjoy autocompletion for both the package being imported from AND its exports.

Hooray!

It’s probably worth noting that the IDE can only really provide autocompletion for packages which actually support ES2015 modules so this won’t always work. That said, more and more packages are shipping with ES2015 module support!

Final Thoughts

This is just a simple example of the power behind Live Templates but it’s also a good gateway to finding ways for them to improve your workflow. If you haven’t used a Jetbrains IDE before, I highly recommend it. I used to be a text editor guy and it won me over with simple, yet powerful features like these. For more information on Live Templates, check out the docs.

Lastly, I’d love to update this with similar tips for other editors. If you have the same approach or something better figured out, let me know and include in the article or add a link!

Thanks for reading!


Psst… if you’re lazy, just copy the text below and paste it into your Live Templates dialog:

<template name="imp" value="import { $NAME$ } from '$PACKAGE$';" description="ES2015 Import  - With reverse completion" toReformat="false" toShortenFQNames="true">
<variable name="PACKAGE" expression="" defaultValue="" alwaysStopAt="true" />
<variable name="NAME" expression="" defaultValue="" alwaysStopAt="true" />
<context>
<option name="JAVA_SCRIPT" value="true" />
</context>
</template>
<template name="impd" value="import $NAME$ from '$PACKAGE$';" description="ES2015 Import - With reverse completion" toReformat="false" toShortenFQNames="true">
<variable name="PACKAGE" expression="" defaultValue="" alwaysStopAt="true" />
<variable name="NAME" expression="" defaultValue="" alwaysStopAt="true" />
<context>
<option name="JAVA_SCRIPT" value="true" />
</context>
</template>