VS Code Quick Tip: JavaScript Import Autocomplete

How to use a built-in feature of VS Code for fast import statements

Visual Studio Code (VS Code) is an extremely popular code editor that is mainly used for frontend web development. One of its features is a sophisticated code completion system known as IntelliSense.

IntelliSense works well... except with JavaScript module imports:

import { useState } from 'react';

If you start to type import you have to decide what you are importing first, instead of where you are importing from. This unfortunately causes an issue for VS Code because it has no idea what to suggest for available imports.

Let's compare this syntax to other languages such as Python:

from math import pi

Since you start the statement with from math, it is easier for the editor to give you suggestions on what is available for you to import from the module.

Okay, this is great news for Python, but what about our beloved JavaScript and Node.js code? Don't worry! I came across a fantastic solution for this.

💡 Solution: Fake reverse the import statement

If I could go back in time and make JavaScript's import syntax work like Python's, I would. However, we can work with what we got by trying to fake reverse the import.

You do this by simply typing import and waiting for a menu to pop up:

VS Code's suggestion menu after typing import
VS Code's suggestion menu after typing import

Make sure to select the import statement option by using the arrow keys and then pressing the Enter key. You should then see a template for an import statement:

import {} from 'module';

The module text will be highlighted and selected, so you can start typing where to import from first. After that, press the Tab key and the cursor will move in between the curly braces. Now, you can type what you want to import and VS Code will be able to offer you suggestions.

Did you find this tip useful? Have your own tip to share? I would love to know, so reach out on Twitter or send me an email.