In the current year 2018, there is no need for any extensions to enable auto-imports in JavaScript or TypeScript. By simply ensuring that you have checkjs: true in your jsconfig.json file, you can enjoy this feature.

There are two types of auto imports available: one is the "add missing import" quick fix, which appears as a lightbulb icon when errors occur:

https://code.visualstudio.com/docs/editor/editingevolved#_code-action

The other type is the auto import suggestions, which display suggested items as you type. You can also select text and press Ctrl + Space to bring up a list of suggestions. Accepting an auto import suggestion will automatically add the import at the top of the file.

https://code.visualstudio.com/Docs/languages/javascript#_auto-imports

Both functionalities should work seamlessly with JavaScript and TypeScript without requiring additional tools. If you encounter any issues with auto imports, feel free to report them here.

The configuration file tsconfig.app.json for a typical Angular 10 application includes:

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

After making a modification to the include section by adding TypeScript files as well:

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

This adjustment resolved my issue https://i.sstatic.net/aE7f5.png

I recently utilized the Auto Import tool created by steoates, and I found it to be incredibly user-friendly.

This plugin automatically identifies, processes, and offers code actions and suggestions for all available imports. It is compatible with both Typescript and TSX.

JavaScript Project Tips:

• To streamline JavaScript projects, utilize the Check JS settings flag.
• You do not have to generate a separate jsconfig.json file within your project directory.

https://i.sstatic.net/1AzR4.png

https://i.sstatic.net/bVmD3.png

If you've come across this issue recently, I discovered that adding a specific setting was necessary in order for the auto-imports to function correctly using my workspace's version of TypeScript. To make this adjustment, simply insert the following line into your workspace settings:

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

Afterwards, when you have a TypeScript file open in VS Code, select the version number for TypeScript located at the bottom right corner of the screen. Once the options appear at the top, opt for "use workspace version" and then proceed to reload VS Code.

Following these steps, the auto-import feature should now be up and running smoothly.

I encountered a similar issue where Visual Studio Code (version 1.45.1) was not automatically adding imports for one of my TypeScript projects. Interestingly, the problem I faced was specific to that project and did not require any additional extensions in VS Code.

Solution:

1. Include "importHelpers": true in the compileOptions section of the tsconfig.json file.
2. Restart Visual Studio Code.

tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "noImplicitOverride": true,
    "noPropertyAccessFromIndexSignature": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
...
  },

Visual Studio Code now offers built-in support for this feature, but it appears to be a bit inconsistent in its functionality. From what I have gathered, VS Code needs to load necessary data for automatic imports in the following manner:

• Retrieve data for all exports from your local files
• Fetch data for all exports from node_modules/@types
• Acquire data for all exports from node_modules/{packageName} only if any of your local files are importing them

You can find a more detailed explanation in this comment: https://github.com/microsoft/TypeScript/issues/31763#issuecomment-537226190.

However, due to potential bugs either within VS Code itself or in specific packages' type declarations, the last two steps may not always function as expected. In my case, I faced issues with auto-imports for react-bootstrap while working on a plain Create-React-App project. The workaround that worked for me was manually copying the package folder from node_modules to node_modules/@types and keeping only the type declaration files there, such as Button.d.ts. This is not an ideal solution since deleting the node_modules folder would require repeating this process. Nonetheless, I found it preferable to continually writing import statements manually.

Before resorting to this method, I had attempted and failed with the following approaches:

• Updating VS Code to version 1.45.1
• Installing types for the relevant package using command like

  npm install --save @types/react-bootstrap

• Creating a jsconfig.json file and adjusting settings based on recommendations from others
• Experimenting with various plugins for automated imports

Make sure to populate the include field within the initial level of the JSON-object in the tsconfig.editor.json as shown below:

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

This configuration has been effective for me.

If necessary, you can also incorporate additional TypeScript file extensions, such as:

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

Include the "typeRoots" property within the tsconfig.json file:

"typeRoots": [
      "node_modules/@types",
      "node_modules/@react",
      "node_modules/@react/router"
    ]

Feel free to append any additional paths as needed.

Make sure to review your tsconfig.json file for any errors if you are using Angular (check the problems terminal).

I encountered an issue where I mistakenly duplicated these lines, and it caused a problem with my code.

{
  "module": "esnext",
  "moduleResolution": "node",
}

If you're working on a JavaScript project like ReactJs or React-Native, simply follow these steps:

1. Start by removing all auto import plugins since VS Code already has this feature built-in.

2. Create a new file named jsconfig.json in the root directory of your project.

3. Next, add the following code to the jsconfig.json file:

   {
      "exclude": ["node_modules"]
   }
   

Encountered an issue while using Typescript Version 3.8.3.

Although Intellisense is a great tool, the auto-import feature was not functioning properly for me. Despite trying to install an extension, the problem persisted. After double-checking all extension settings, the solution was found in clearing the cache at

C:\Users\username\AppData\Roaming\Code\Cache

and reloading VSCode.

Note: To access AppData in username, enable the option to Show (Hidden Items) under the View menu.

Sometimes, confusion arises when we mistake import-related errors for issues with deprecated features or APIs in Angular.

For instance, attempting to use:

constructor(http: Http) {

//...}

When 'Http' has been replaced by 'HttpClient', this may lead to misinterpretation of errors as being related to auto-import failures. Additional information on deprecated APIs and Features can be found here.

Having Typescript Importer has been a game-changer for me

Check out the Typescript Importer here!

This tool goes above and beyond by searching for typescript definitions within your workspace and seamlessly importing them with just a press of the enter key.