capaj / vscode-exports-autocomplete

finds javascript ES6 exports in your project and autocompletes them when writing javascript statements

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.