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

User · Answer

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

User · Answer

If you are using angular  check that the tsconfig json does not contain errors   in the problems terminal  For some reason I doubled these lines  and it didn t work for me      quot module quot    quot esnext quot      quot moduleResolution quot    quot node quot

User · Answer

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  quot import    quot  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

User · Answer

There is a Visual Studio Code issue you can track and thumbs up for this feature  There was also a User Voice issue  but I believe they moved voting to GitHub issues   It seems they want auto import functionality in TypeScript  so it can be reused  TypeScript auto import issue to track and thumbs up here

User · Answer

I ve come across this problem on Typescript Version 3 8 3    Intellisense is the best thing we could have but for me  the auto-import feature doesn t seem to work either  I ve tried installing an extension even though auto-import didn t work  I ve rechecked all the settings related to extensions  Finally  the auto-import feature started working when I clear the cache  from   C  Users username AppData Roaming Code Cache   amp  reload the VSCode  Note  AppData can only be visible in username if you select  Show  Hidden Items  from  View  Menu   In some cases  we may end up thinking there is an import related error  while in actuality  unknowingly we might be coding using deprecated features or APIs in angular   For example  if you re trying to code something like this   constructor  http  Http              Where Http is already deprecated and replaced with HttpClient in the newer version  so we may end up thinking an error related to this might be related to the auto-import error  For more information  you can refer Deprecated APIs and Features

User · Answer

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

User · Answer

I am using  ImportJS  plugin by Devin Abbott for auto import and you can install this using below code npm install --global import-js

User · Answer

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

User · Answer

In the tsconfig app json  a standard Angular 10 app has       quot extends quot    quot   tsconfig base json quot      quot compilerOptions quot          quot outDir quot    quot   out-tsc app quot        quot types quot              quot files quot          quot src main ts quot        quot src polyfills ts quot          quot include quot          quot src      d ts quot         Once I changed the include like to be     quot include quot          quot src      d ts quot        quot src      ts quot       It worked for me

User · Answer

VS Code supports this out of the box now  but the feature sometimes works and sometimes doesn t  it seems  As far as I could find out  VS Code has to load data needed for auto imports  which happens more or less like this    Load data for all exports from your local files Load data for all exports from node modules  types Load data for all exports from node modules  packageName  only if any of your local files is importing them   This is better described in this comment  https   github com microsoft TypeScript issues 31763 issuecomment-537226190   Due to bugs either in VS Code or in specific packages  type declarations  the last two points don t always work  That was my case  I couldn t see react-bootstrap auto imports in a plain Create-React-App  What finally fixed it was manually copying the package folder from node modules to node modules  types and leaving there only the type declaration files  e g  Button d ts  This is not great because if you ever delete node modules folder it will stop working again  But I prefer this from always having to manually type imports  This was my last resort after trying and failing with these methods    Update VS Code  v  1 45 1  Install types for your package  e g  npm install --save  types react-bootstrap Add jsconfig json file and play with the settings as other people suggested Try out all the plugins for automatic imports   I hope this helps someone

User · Answer

Typescript Importer does do the job for me https   marketplace visualstudio com items itemName pmneo tsimporter It automatically searches for typescript definitions inside your workspace and when you press enter it ll import it

User · Answer

Fill the include property in the first level of the JSON-object in the tsconfig editor json like here   quot include quot        quot src      ts quot     It works for me well  Also you can add another Typescript file extensions if it s needed  like here   quot include quot        quot src      ts quot      quot src      spec ts quot      quot src      d ts quot

[typescript] Visual Studio Code Automatic Imports

Examples related to typescript

Examples related to angular

Examples related to visual-studio-code