Visual Studio Code Automatic Imports

Question

I'm in the process of making the move from Webstorm to Visual Studio Code. The Performance in Webstorm is abysmal.

Visual studio code isn't being very helpful about finding the dependencies I need and importing them. I've been doing it manually so far, but to be honest I'd rather wait 15 seconds for webstorm to find and add my import that have to dig around manually for it.

I'm using the angular2 seed from @minko-gechev https://github.com/mgechev/angular2-seed

I have a tsconfig.json in my baseDir that looks like this:

    {
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "declaration": false,
    "removeComments": true,
    "noLib": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "sourceMap": true,
    "pretty": true,
    "allowUnreachableCode": false,
    "allowUnusedLabels": false,
    "noImplicitAny": true,
    "noImplicitReturns": true,
    "noImplicitUseStrict": false,
    "noFallthroughCasesInSwitch": true
  },
  "exclude": [
    "node_modules",
    "dist",
    "typings/index.d.ts",
    "typings/modules",
    "src"
  ],
  "compileOnSave": false
}

and I have another one in my src/client dir that looks like this:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false,
    "allowSyntheticDefaultImports": true
  }
}

I don't know why there are two. The angualr seed project uses typescript gulp build tasks so I guess the compilation is different.

What can I do get vscode to be more helpful??

Solution 1

I got this working by installing the various plugins below.

Most of the time things just import by themselves as soon as I type the class name. Alternatively, a lightbulb appears that you can click on. Or you can push F1, and type "import..." and there are various options there too. I kinda use all of them. Also F1 Implement for implementing an interface is helpful, but doesn't always work.

List of Plugins

• npm Intellisense
• ngrx for Angular 2 Snippets
• TypeScript Toolbox
• npm
• TsTools
• Angular Snippets (Version 9)
• Types auto installer
• Debugger for Chrome
• TypeScript Importer
• TypeScript Hero
• vscode-icons
• Add Angular Files

Screenshot of Extensions

^{*click for full resolution}

Solution 2

2018 now. You don't need any extensions for auto-imports in Javascript (as long as you have checkjs: true in your jsconfig.json file) and TypeScript.

There are two types of auto imports: the add missing import quick fix which shows up as a lightbulb on errors:

And the auto import suggestions. These show up a suggestion items as you type. Or you can select text and press Ctrl + Space to bring up a list of suggestions. Accepting an auto import suggestion automatically adds the import at the top of the file

Both should work out of the box with JavaScript and TypeScript. If auto imports still do not work for you, please open an issue

Solution 3

I used Auto Import plugin by steoates which is quite easy.

Automatically finds, parses and provides code actions and code completion for all available imports. Works with Typescript and TSX.

Solution 4

In the tsconfig.app.json, a standard Angular 10 app has:

{
  "extends": "./tsconfig.base.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": []
  },
  "files": [
    "src/main.ts",
    "src/polyfills.ts"
  ],
  "include": [
    "src/**/*.d.ts"
  ]
}

Once I changed the include like to be:

  "include": [
    "src/**/*.d.ts",
    "src/**/*.ts"
  ]

It worked for me

Solution 5

If anyone has run into this issue recently, I found I had to add a setting to use my workspace's version of typescript for the auto-imports to work. To do this, add this line to your workspace settings:

{
  "typescript.tsdk": "./node_modules/typescript/lib"
}

Then, with a typescript file open in vscode, click the typescript version number in the lower right-hand corner. When the options at the top appear, choose "use workspace version", then reload vscode.

Now auto-imports should work.

View more solutions

Comments

[basarat]

Give alm.tools a go 🌹

[Rico Leuthold]

:-) experiencing the same at the moment. Did you find a solution?

[reach4thelasers]

Yep - I found out EVERYTHING is added via extensions. Try "auto import" "typescript import assistance" "tsd-recommender" "npm intellisense"

[Sang Shin]

I tried "auto import" extension and it kinda hangs while indicating it is "scanning". I am on Windows 10. Anybody has the same problem?

[Code Ratchet]

@reach4thelasers hey, I too am in the same position as you were trying to find an extensions etc, I've installed the extensions you have specified above, I then copied the code you mentioned in the photo however I still get the red error under PipeTransform it doesn't give me the option to automatically import it, instead I get the error what you display in your photo... did you managed to resolve this?

[reach4thelasers]

Hey @CodeRatchet I posted an answer with a list of my extensions and some more info.

[RationalDev likes GoFundMonica]

This appears to be a duplicate of stackoverflow.com/questions/30014812/… :)

[Code Ratchet]

did you have to modify any config files? or was it a simple install and enable?

[reach4thelasers]

No I don't think any config modifications are required. The only thing thats in my settings.json is "typescript.tsdk": "node_modules/typescript/lib/" which forces vscode to use the version of typescript in the node_modules rather than the one installed on the system.

[reach4thelasers]

FYI my typescript version from the packages.json is "typescript": "2.0.3",

[watery]

Can you please provide you plugins as a list, since your attached image is no longer visible?

[Lion]

TypeScript Importer works well, also with custom rootDirs or mappings using paths in tsconfig.json. It fixes the broken autoimport of VS Code.

[erikvimz]

I can confirm this plugin works well. It even ignores my index.ts. By default VS Code wants to import from my index.ts file. Great answer!

[Matt Bierner]

This is not necessary. Auto imports work using VS Code's bundled version of typescript

[inorganik]

@MattBierner in my case, it was necessary as I was using VScode on linux (CentOS). Auto-imports did not work until I pointed to the workspace installation of Typescript, which was quite a bit older than what ships with VScode

[inorganik]

Yes, auto-imports work great on Mac out of the box regardless of if your project's version of typescript matches with what shipped with VScode, but in other OS's, namely linux, this is not the case, and you must point to the workspace's version of TS as I explained in my answer.

[Matt Bierner]

That is not correct. If what I describe above is not working, it is a bug and you should file a bug report. I am the maintainer of VS Code's JS/TS support and implemented these features

[Matt Bierner]

This is not good advice in almost all cases. If you don't see auto imports working with the bundled version of typescript, please file a bug report: github.com/Microsoft/vscode/issues/new?template=bug_report.m‌​d

[inorganik]

@MattBierner in the context of a Q&A site it is good advice. When auto-imports do not work, knowing it is a bug does not solve their problem. We don't want to wait for a bug fix for this edge case and I'm not going to file yet another bug in a repo that has tens of thousands of issues. Lastly I'd just like to point out that this is the advice that is prescribed on the VScode website

[Matt Bierner]

Look: I wrote the documentation you are linking to and implemented this feature in VS Code. Your advice is misguided in the context of this question and will cause unnecessary confusion. It may work for you but it is not the proper solution. As I said before, we always expect auto imports to work. If they do not work using the bundled version of VS Code, please report an issue against VS Code so that we can fix it. We will let you know if you should downgrade as a temporary workaround

[inorganik]

Matt, it is not important to those who are suffering from this issue whether their solution is "proper" or not. The fact is, this solution fixed the problem for me and others I'm working with. I don't expect it to fix the problem for everyone, but I wanted to leave it here in case it helps someone. And honestly - we are talking about using the version of TS that is supported in a project, seems like we should be doing that anyway no?

[inorganik]

Also, I'm seeing an open issue in which you suggested upgrading TS for your workspace - please understand that in many projects that is not possible, especially Angular where only up to a certain version of TS is supported

[Matt Bierner]

The original question was "Can VS Code provide auto imports like webstorm?" The answer is: yes it can. There are many unique cases where auto imports may still not work as expected due configuration issues or bugs like the one you may be hitting, but I do not think these should posted as answers here as they are often project specific and will get out date. We also want people reporting issues instead of trying to work around them

[inorganik]

I don't want to keep this silly discussion going on forever, but, put yourself in my shoes. Should I wait for maintainers to get around to fixing my issue (that may only exist on Linux), when they have 4K open issues, or use a very benign, simple, harmless and quick fix to make it work now?

[jabacchetta]

For anyone else having trouble with auto importing React components, I've opened an issue here: github.com/Microsoft/vscode/issues/66122

[buncis]

is there any hotkeys for this? I don't want to click the lightbulb every time I want import something cmd+. on Mac

[Tonio]

@buncis did you find a shortcut for this ?

[buncis]

@Tonio cmd+. on Mac

[marcel]

I installed TypeScript Importer and TypeScript Toolbox. Both worked for me. +1

[Andy]

@MattBierner having authored my own autoimport tools for JS/Flow/Atom and planning on switching to Typescript soon, I'm curious: does VSCode base its suggestions solely on export statements, or does it also base them on our own import statements (for example if we import {foo as bar} from 'foo', will it include that in suggestions for bar in another file?)

[Matt Bierner]

It uses the exported symbol names

[Aspiring Dev]

@MattBierner is this supposed to autoimport Angular components as well? Judging from the screenshot that seems to be what OP meant.

[pailhead]

2020 the auto-fix variety doesn't seem to work for me on Ubuntu.

[Noumenon]

It's not full auto import if you have to navigate to each red underline, hit Ctrl+1, and pick from a list. Eclipse for Java does every import in the file with one keystroke and makes a popup if it can't decide.

[Matt Bierner]

@Noumenon See auto import suggestions

[Noumenon]

@MattBierner That's the same number of keystrokes, when you paste or type a bunch of code and have to do one backspace on each red underline, then Ctrl+Space, then pick from the list. I'd call it "assisted import", when compared to fully automated import like Eclipse's single Ctrl+Shift+O command.

[Matt Bierner]

Single source action that adds all missing imports

[Andrew Koster]

So when auto imports DON'T work, and I'm using a bunch of extensions, how do I know to file a bug report with VS Code instead of one of the extensions?

[user826988]

Thank you, this fixed my issue with detecting missing imports

[Pavel]

Unfortunately did not help me, still can't auto-import from modules in node_modules :(

[ame]

Thank you so much, your solution does work. The trouble was in tsconfig preferences, as it turned out, but not in the IDE.

[ame]

I would be better to add your solution in the tsconfig.editor.json )) After I made changes in the tsconfig.app.json the app build was broken)

[Chris22]

Adding this extension worked for me. It correctly auto-imported the EventEmitter from @angular/core (as it was red-lined for the Quick Fix). Without that extension, it was importing EventEmitter from protractor (which wasn't what I wanted). I have a question to the MS VSCode maintainer @MattBierner here concerning the different import source.

[Chris22]

@MattBierner Thanks. I used this method in your above link to auto-import EventEmitter into an Angular 9 app. The result I got was that EventEmitter was auto-imported from protractor file instead of from the correct @angular/core. I didn't get an error when trying to assign an event handler as an EventEmitter in VSCode (no red line) so there was no "light bulb" for a quick fix and no 'auto import suggestions' as I typed. Is there something I need to do in VSCode BEFORE I right-click and select 'Source Action' in the context menu as shown in your linked solution above? Thx!

[Konrad G]

Auto Import TypeScript support rocks!

[Derek Hill]

@Matt Bierner. Thank you for your work on VS Code. In VS code 1.56.1 it seemscheckjs is not a permitted property, but "checkJs": true works.

[Hank]

Typescript importer worked for me, thank you!

[Jonathan002]

@Lion Are you able to make Typescript Importer use tsconfig.json paths for newly created files? Tsconfig.json paths works for me, but only after adding one import of the file to the project.

[Arefe]

I just installed it and works fine for me.

[Filip Kováč]

@Matt Bierner don't know how about you, but once you have big enough project auto import just stops working. Suggestions are empty.

[MikeyT]

What's strange is that auto-import works out of the box in a plain javascript project while initially typing, but if you accept the import, then delete the import statement, vscode magically no longer has any idea that it's something that can be imported (no quick fix suggestions). The only thing that works for me for initial typing and quick fix after-the-fact is to add the jsconfig with checkJS set to true.

[jave.web]

@Lion TypeScript Importer was enough to add imports for package and "built-in"(react/react-native) stuff, but it does not always respect path aliases in tsconfig.json and doesn't work every time, for 1 file it barely worked, for other it worked perfectly aliases included, not sure what's wrong 🤷

[Karl Erik Steinbakk]

Shift + alt + "o" on pc organizes imports and removes the ones you don't need (but do not add missing ones, for that you need ctr + "." or ctr + space)