VSCode TypeScript 3.x: Is There a Shortcut for 'Add All Missing Imports'?

Table of Contents#

1. Understanding the Problem: Missing Imports in TypeScript
2. Built-in VSCode Features for Import Management
3. Is There a Native Shortcut for "Add All Missing Imports"?
4. Third-Party Extensions to the Rescue
5. Manual Workarounds: When Extensions Aren’t an Option
6. Tips for Efficient Import Management in TypeScript
7. Conclusion
8. References

1. Understanding the Problem: Missing Imports in TypeScript#

TypeScript enforces strict module systems, requiring explicit imports for any symbol (function, class, type, etc.) defined in another file. For example, if you use a utility function formatDate from ./utils/date without importing it, TypeScript will throw an error:

// Error: Cannot find name 'formatDate'. Did you mean to use 'formatDate' from './utils/date'?
const today = formatDate(new Date()); 

Fixing this requires adding import { formatDate } from './utils/date'; at the top of the file. For small files with 1-2 missing imports, this is trivial. But in large files with multiple missing symbols (e.g., after pasting code from another project), manually adding each import becomes tedious and error-prone.

The ideal solution? A single shortcut to scan the file, identify all missing imports, and add them automatically.

2. Built-in VSCode Features for Import Management#

VSCode includes several built-in tools to simplify import management for TypeScript. While none directly "add all missing imports," they reduce friction for individual imports:

2.1 IntelliSense Auto-Import Suggestions#

As you type a symbol (e.g., formatDate), VSCode’s IntelliSense (powered by the TypeScript language server) will suggest imports from nearby files. Press Tab or Enter to auto-insert the import statement at the top of the file.

Example:
Typing formatD triggers a suggestion for formatDate from ./utils/date. Selecting it adds:

import { formatDate } from './utils/date';

2.2 Quick Fix (Ctrl+. / Cmd+.)#

When a missing import error appears (red squiggly line), place your cursor on the error and press Ctrl+. (Windows/Linux) or Cmd+. (macOS). VSCode will show a "Quick Fix" menu with options like "Import 'formatDate' from module './utils/date'". Selecting this adds the import instantly.

Shortcut: Ctrl+. (or Cmd+.) → Select "Import..."

2.3 Organize Imports (Shift+Alt+O)#

VSCode’s "Organize Imports" command (editor.action.organizeImports) cleans up existing imports by:

• Removing unused imports.
• Sorting imports alphabetically.
• Grouping related imports (e.g., external libraries first, then local files).

Shortcut: Shift+Alt+O (Windows/Linux) or Shift+Option+O (macOS).

Note: This does NOT add missing imports—it only optimizes existing ones.

3. Is There a Native Shortcut for "Add All Missing Imports"?#

Short Answer: No.

As of TypeScript 3.x (and even newer TypeScript versions), neither VSCode nor the TypeScript language server includes a built-in shortcut or command to "Add All Missing Imports" in a file. The native tools (IntelliSense, Quick Fix) handle imports one at a time, not in bulk.

This is a deliberate design choice: adding multiple imports automatically can introduce ambiguities (e.g., if two modules export a symbol with the same name). The TypeScript team prioritizes accuracy over automation here, leaving bulk import handling to third-party extensions.

4. Third-Party Extensions to the Rescue#

While native VSCode lacks a bulk import shortcut, several extensions fill this gap. Below are the most popular options for TypeScript 3.x projects:

4.1 "Auto Import" by steoates#

Note: Replace with actual extension logo/screenshot if possible.

What it does: Automatically detects missing imports and adds them in bulk. It also suggests imports as you type and supports TypeScript, ES6, JSX, and TSX.

Installation:

1. Open VSCode → Extensions panel (Ctrl+Shift+X or Cmd+Shift+X).
2. Search for "Auto Import" by steoates.
3. Click "Install".

Usage:

• After installation, the extension runs in the background. To manually trigger "Add All Missing Imports":
  1. Open the Command Palette (Ctrl+Shift+P or Cmd+Shift+P).
  2. Search for "Auto Import: Add All Missing Imports".
  3. Press Enter.

Custom Shortcut:
To bind a keyboard shortcut:

1. Open Keyboard Shortcuts (Ctrl+K, Ctrl+S or Cmd+K, Cmd+S).
2. Search for "Auto Import: Add All Missing Imports".
3. Click the pencil icon and assign a shortcut (e.g., Ctrl+Shift+I).

4.2 "Import All" by Uroš Trstenjak#

What it does: A lightweight extension focused explicitly on bulk import addition. It scans the file for unresolved symbols and adds all missing imports in one click.

Installation:
Search for "Import All" in the VSCode Extensions panel and install.

Usage:

• Run via Command Palette: "Import All: Add Missing Imports".
• No default shortcut, but you can assign one via Keyboard Shortcuts.

4.3 "TypeScript Importer" by pmneo#

What it does: Enhances VSCode’s auto-import logic with better support for TypeScript, including bulk imports. It prioritizes local files and reduces false positives.

Installation:
Install via Extensions panel (search "TypeScript Importer").

Usage:

• Automatically suggests imports as you type.
• For bulk imports, use the Command Palette: "TypeScript Importer: Add All Missing Imports".

5. Manual Workarounds: When Extensions Aren’t an Option#

If you can’t install extensions (e.g., due to workplace restrictions), use these manual workflows to reduce import pain:

5.1 Use the Problems Panel#

VSCode’s "Problems" panel (Ctrl+Shift+M or Cmd+Shift+M) lists all errors in your project. For missing imports:

1. Open the Problems panel.
2. For each "Cannot find name" error, click the error → press Ctrl+. → select "Import...".
3. Repeat until all imports are added.

Tip: Use F8 to jump to the next error, streamlining the process.

5.2 Leverage Code Snippets#

Define a custom snippet to auto-insert common imports. For example, if you frequently use formatDate and validateEmail from ./utils, create a snippet:

1. Open User Snippets (Ctrl+Shift+P → "User Snippets" → "typescript.json").
2. Add:

   "Common Utils Imports": {
     "prefix": "utils-imports",
     "body": [
       "import { formatDate, validateEmail } from './utils';",
     ],
     "description": "Import common utilities"
   }

3. Type utils-imports in a TS file and press Tab to insert the imports.

6. Tips for Efficient Import Management in TypeScript#

To minimize missing imports in the first place, adopt these best practices:

6.1 Enable Auto-Import Suggestions#

Ensure VSCode’s auto-import suggestions are enabled:

• Go to File → Preferences → Settings (Ctrl+, or Cmd+,).
• Search for "TypeScript > Suggest: Auto Imports" and check the box.

6.2 Configure tsconfig.json Paths#

Use paths in tsconfig.json to simplify imports and reduce typos. For example:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@utils/*": ["src/utils/*"]
    }
  }
}

Now you can import via import { formatDate } from '@utils/date'; instead of relative paths like ../../utils/date.

6.3 Use "Import Cost" Extension#

The "Import Cost" extension shows the size of imported packages inline, helping you avoid unnecessary imports (and thus reducing missing import issues).

7. Conclusion#

While VSCode and TypeScript 3.x lack a native shortcut for "Add All Missing Imports," third-party extensions like "Auto Import" or "Import All" fill this gap effectively. For teams or individuals unable to use extensions, manual workflows (e.g., Quick Fix + Problems panel) or snippets can reduce friction.

By combining these tools with best practices like enabling auto-import suggestions and configuring tsconfig.json paths, you can minimize missing imports and keep your TypeScript workflow smooth.

8. References#

• VSCode TypeScript Documentation
• TypeScript 3.x Release Notes
• "Auto Import" Extension (VSCode Marketplace)
• "Import All" Extension (VSCode Marketplace)
• TypeScript tsconfig.json Paths