Typescript: Please provide autocomplete for <reference> and import paths

[NoelAbrahams]

Hi,

Visual Studio (2013 Ultimate) provides intellisense for the src attribute for script elements, by reading the file system and displaying available files or folders.

It will be quite useful if similar functionality can be provided for <reference> and import statements:

 <reference path="foo/    <--- here

import foo = require('foo/   <--- and here

[basarat]

:+1:

[basarat]

@NoelAbrahams btw resharper will do that for you :

[NoelAbrahams]

@basarat, interesting. Never used resharper and don't think that's going to change. So for anti-third party tool people like myself I hope this will go into the VS plugin. :smile:

[DanielRosenwasser]

:+1:

[basarat]

@NoelAbrahams btw atom-typescript will complete your references : https://github.com/TypeStrong/atom-typescript#relative-paths

and even autocomplete external module "name" and "./path"s :rose:

[DanielRosenwasser]

I don't know whether @ahmad-farid has actually gotten the chance to start on this, but @basarat, is this functionality something you think you could potentially contribute to TypeScript itself, or is it more tightly coupled to atom-typescript?

[basarat]

is it more tightly coupled to atom-typescript

Tightly coupled in that I do _poor_ tokenization to detect these :
https://github.com/TypeStrong/atom-typescript/blob/d5fb4707b989f15d3be8d57cfa28d88af50b4702/lib/main/atom/typescriptGrammar.ts#L68-L76

The code to get these results is a bit simpler

• relative paths for reference / imports : https://github.com/TypeStrong/atom-typescript/blob/d5fb4707b989f15d3be8d57cfa28d88af50b4702/lib/main/lang/projectService.ts#L865-L871
• external modules names lookup : I actually asked and got this simple function : https://github.com/Microsoft/TypeScript/issues/2593#issuecomment-89130039

Doesn't have to be tightly coupled. But that's just how I wrote it as a TypeScript consumer and there can't be a copy paste PR.

If someone were to PR this they would do the _am I in a reference comment/import string?_ detection on getCompletionInfo and then do the lookups there.

Also more possible hoops : https://github.com/Microsoft/TypeScript/pull/2173#issuecomment-89347414

[gautamsi]

Can you not drag and drop for that seems far easier.

for import autocomplete I would suggest having another feature like "Copy Import Reference" in solution explorer right click on file and then paste this in file which would write like 'import fileName = require("../dir/filename");'. This should keep track of relative paths and file name casing.

if someone can guide me where should I look for it in this source, I can try to add on.

[danquirk]

The Visual Studio related code you would need to modify to make changes like this aren't open source at the moment.

We actually had drag and drop /// reference generation at some point but it's highly undiscoverable and doesn't scale very well (do you really want to drag and drop 5+ items from disparate parts of your solution in folders that may be closed in solution explorer?).

In any case, those sorts of interactions would be nice but it should also be easier to do in a keyboard focused workflow which autocomplete would help with.

[alexeagle]

we have so many modules that walking the filesystem is not practical, and some of them are generated external module names, not files. So we would like to run a periodic indexing, and then somehow provide a list of these to the language services (eg. an RPC, or a file we stage on local disk, etc.)

[olmobrutall]

+1 having auto-complete on import will be awesome.

[billti]

Still seeing a lot of requests for this, especially as now with VSCode and Salsa this is effectively a regression (i.e. they used to give completions on require for modules). I believe some non-Microsoft editors also provide support for this in TypeScript/JavaScript already. We should consider pulling this in (ping @mhegazy ).

[atifsyedali]

Honestly, this is the only reason why I have to keep using Webstorm, which has built custom handlers for auto complete imports and references. And not just auto-complete, but auto-fixes as well.

We have around 25k lines of Typescript atm and it would be really nice if this feature can be pushed in so all other IDEs can adopt it.

[frederikschubert]

We also need this feature. This is one of the biggest drawbacks coming from a Java world where a refactoring can easily be done using eclipse or intellij.

[mikepc]

I would like to chime in here, while auto import completion is very helpful and nice to work with, I would like to point out that this feature is one of the reasons that web storm is less than optimal. Scanning node_modules on a continuous basis creates a significant memory and processing overhead that would slow down VSCode quite a bit I think.

In short -- I would love this feature, but not at the cost of the awesome speed of VSCode. As a lightweight editor, I expect to have speed, power, and flexibility at the cost of convenience. A slow IDE has a higher total cost of ownership due to it chugging constantly creating delays where a lighter-weight editor lets you burn through at a continuously uninterrupted pace.

[danquirk]

@mikepc curiou whether you've used other implementations like https://packagecontrol.io/packages/AutoFileName and how you find its perf for the projects that WebStorm is struggling on.

[frederikschubert]

I think that you can have a sophisticated algorithm for import completion that does not suffer from the performance problems you describe. One optimization would be to use the exclude field in the tsconfig to exclude files and folders from the autocompletion index. Now only project file paths will autocomplete. If someone imports a module from a dependency then typescript knows where this dependency is located. So the folder of the imported dependency gets also included in the index. The removal could be managed via reference counters for each dependency module.

[mikepc]

I haven't any knowledge of the inner workings of the various methods of
package traversal, and if indeed it is possible to include it with only a
minor performance hit I would completely love having it added. I enjoy
using VSCode. I just want to continue to enjoy using it.

On Mon, Apr 18, 2016 at 12:37 PM, Frederik Schubert <
[email protected]> wrote:

I think that you can have a sophisticated algorithm for import completion
that does not suffer from the performance problems you describe. One
optimization would be to use the exclude field in the tsconfig to exclude
files and folders from the autocompletion index. Now only project file
paths will autocomplete. If someone imports a module from a dependency then
typescript knows where this dependency is located. So the folder of the
imported dependency gets also included in the index. The removal could be
managed via reference counters for each dependency module.

—
You are receiving this because you were mentioned.
Reply to this email directly or view it on GitHub
https://github.com/Microsoft/TypeScript/issues/188#issuecomment-211543527

[rolandoldengarm]

After reading this topic, I'm still not sure this will be implemented in VS Code? It's just annoying to do all of this manually every time.

[caseyhoward]

This is by far my biggest time waster when working with typescript. If it can autocomplete my class name, it should be able to make sure there is an import statement for it. I end up taking an educated guess about the path and then adding "../" to it and waiting to see if the red swiggly goes away and repeating until it does.

It would also be nice to be able to "optimize imports" and automatically remove unused imports.

[fxck]

Yes please, this is such a pain the in arse.

[daslicht]

any news on this ?

[mhegazy]

any news on this ?

working on it. but nothing to report.

[Ciantic]

Has there been agreement how this should work for imports?

I imagine this would be a nice user experience: in VS Code if I hit Ctrl+T (Type to search symbols project wide), and choose a symbol it would allow me to somehow generate import statement for it.

Tiny bit related, some reason the project wide symbol listing does not show me exported variables, e.g. export let globalStyles = {} but it appears within file symbol listing. Project wide symbol listing must show all symbols to make it work as import GUI.

[caseyhoward]

@Ciantic That sounds good. I would rather have it when using Intellisense it automatically imports things that it autocompletes that aren't in scope. I would also like the option to clean up unused imports or either further functionality for sorting them. Another thing that would be nice is something like if you delete the last usage of something imported, the import statement gets removed.

[Sammons]

I built this to stopgap the problem for myself https://marketplace.visualstudio.com/items?itemName=Sammons.ts-import-assistance, code is here: https://github.com/Sammons/ts-import-assistance. It is not super intelligent but it does what I need. Essentially I found no easy way to see which symbols were missing in the current document - so this is a command you can execute to search for and import the symbol you have highlighted.

This just builds on top of the built in symbol search.

[Taytay]

I also came across and used this VS Code Plugin to help in the meantime:
https://marketplace.visualstudio.com/items?itemName=steoates.autoimport

It helped _tremendously_ when I was switching a project from namespaces (internal modules) to external modules.

[rolandoldengarm]

@Taytay Thanks, tried it, but it's causing my VS Code to hang.. Maybe my app is too big, but it's useless to me.

[Taytay]

Oh dang @rolandoldengarm. Understood. (For what it's worth, I've found the author to be responsive in issues in case you want to pursue it.)

[buehler]

@Taytay Thanks for the info, but I made my own extension ;-) currently I'm rewriting the logic to make it faster. I'm not using regex to parse through the files (like many others do), but use the typescript compiler to generate the AST of the source.
If you're interested, you'll find it here: https://marketplace.visualstudio.com/items?itemName=rbbit.typescript-hero

[iRoachie]

@buehler This works great! Had no problems as yet. Definitely much faster than typing it all out.

[zpdDG4gta8XKpMCd]

please what is the status of it? roadmap has it checked, but the nightly build doesn't show it

[mhegazy]

how are you using the nightly build?

[daslicht]

@mhegazy http://rostacik.net/2015/09/04/using-typescriptnext-nightly-package-dont-rely-on-save-dev-to-be-up-to-date/

[zpdDG4gta8XKpMCd]

@mhegazy i am using VSCode with the

    "typescript.tsdk": "./node_modules/typescript/lib",

in the .vscode/settings.json pointing to the nightly build npm package (latest just updated)

there is no autocomplete for the module paths for imports

as you can see the autocomplete only shows an already seen text token not a name of a file on disc

[vlechemin]

It works with relative paths, but not with "absolute paths" (combination of baseUrl and paths).
Any solution or work around to this problem?
Thanks