Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Visual Studio Code Automatic Imports

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.

Screenshot: cannot find import

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??

like image 211
reach4thelasers Avatar asked Jul 05 '16 18:07

reach4thelasers


People also ask

Does VS Code have auto Import?

Auto-import problems There are extensions to help with this, but it turns out VS Code now handles this natively – using the jsconfig.

How do I turn off auto Import in VS Code?

To disable auto imports, set "javascript. suggest. autoImports" to false .

How do I fix imports in VS Code?

Set the correct Python path in VSCode In order to fix Unresolved Import in VSCode, you have to set python. pythonPath key in the settings to the correct value. You can quickly open the settings. json editor by accessing File > Preferences or press Ctrl + , key combination.


1 Answers

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:

enter image description here

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

enter image description here

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

like image 102
Matt Bierner Avatar answered Oct 12 '22 11:10

Matt Bierner