Deprecation notice

Since publishing this extensions the same functionality was added into vscode core so this extension in not needed anymore. Actually it's undesirable because vscode's implementation is faster.

vscode-exports-autocomplete

Showcase

Features

Collects ES6 exports from your project and autocompletes them. Upon completion, item is also imported using a relative path. Import is placed after last import in that file.

Generated import has no semicolon when you have a standard package in your package.json devDependencies. If you have eslint, it should pick up it's semicolon config and insert/omit semicolon accordingly to what you have set.

Of course it works even with huge projects which contain thousands of JS files. All JS/JSX files are parsed and cached on startup, then vscode internal file watcher is used to observe changed files.

We also parse ES6 files in node_modules-just the roots. For example if you have redux package in your dependencies, we will parse this file giving us exactly the exports we want. So if you're a lib author, don't forget to add module property to your package.json.

Another nifty feature is adding imports when you paste some code, see:

Usage inside JSX

Since VSCode does have it's own JSX support, there are some usability choices made to complement that.

If you're writing a component WITH children, you need to write a pair. Utilize a vscode's feature that will make any text into a JSX opening and closing pair when you hit a TAB key. Like this:

TODO add gif

If you're writing a component WITHOUT children, start by typing <. When you choose autocomplete, plugin will automatically close the tag for you. Like this:

TODO add gif

Extension Settings

This extension has the following settings:

• vscode-exports-autocomplete.enable: enable/disable this extension
• vscode-exports-autocomplete.addImportsOnPaste: set this to false when you're annoyed by import tokens being added on paste
• vscode-exports-autocomplete.minimumWordLengthToImportOnPaste: set this to a higher value if 'on paste' is too aggressive for you
• vscode-exports-autocomplete.enableNpmDependencies: set this to false when you're annoyed by the stuff you get from your npm modules*
• vscode-exports-autocomplete.addSpacingAroundCurlyBraces: set this to true when you prefer spaces around curly braces
• vscode-exports-autocomplete.indentationOverride: string to be used when indenting, default is two spaces,
• vscode-exports-autocomplete.quoteCharOverride: string to be used when writing string literals, default is single quote, for doublequote use """
• vscode-exports-autocomplete.cacheSizeLimit: size limit for the cache of parsed exports, parsed with bytes npm package, shared among all projects, default "25MB"

You need to restart VSCode for the changes to take effect.