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

: enable/disable this extension vscode-exports-autocomplete.addImportsOnPaste : set this to false when you're annoyed by import tokens being added on paste

: 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

: 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*

: 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

: 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,

: 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 """

: 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.