Auto Import Relative Path

Never type an import path again.

Angular · React · Vue · Svelte · Astro · LaTeX · JS · TS · CSS · SCSS · HTML · Markdown

Drag a file or press a key — the right import lands in your editor. Path, syntax, and placement handled automatically.

Quick Start

1. Install the extension (see below).
2. Click a file — or multi-select several — in the Explorer and press Option+D (Alt+D on Windows/Linux) to auto-import — or use the two-step Cmd/Ctrl+Shift+A then Cmd/Ctrl+I workflow.
3. Or drag a file — or a whole multi-selection — from the Explorer directly into an open editor — the imports land on their own lines at the drop point, one per file.
4. The import lands in your editor. Your cursor is on the identifier — name it and Tab out.

Two-step workflow: Cmd/Ctrl+Shift+A to copy a file's path, then Cmd/Ctrl+I in any editor to paste the import. The clipboard holds the path until you copy something else — paste into as many files as you like.

Several files at once: every gesture accepts an Explorer multi-selection — the imports land as one stacked block, one per file, each with its own independent placeholder.

Pick a style on the fly: Run Auto Import: Paste as Import (Pick Style) from the Command Palette, or click Paste with Style on the copy toast. Choose an import shape for one paste without changing your default.

See the full specification

Highlights

• Built for every major framework — Angular, React, Vue, Svelte, Astro — plus vanilla JS/TS, CSS/SCSS, HTML, Markdown, and LaTeX (drag an image in → a figure float; drop a .tex → \input; a .bib → \addbibresource)
• Framework-aware placement — imports land inside Astro --- frontmatter and Vue / Svelte <script> blocks automatically; a stylesheet dropped in a <style> block becomes an @import / @use right there
• Smart identifiers — default imports auto-named from the filename (logo.svg → import logo), PascalCase component naming for Vue/Svelte/Astro (my-button.vue → import MyButton), plus exported-class detection for TypeScript, Angular PascalCase auto-fill, and CSS Modules styles binding
• Drag-and-drop from Explorer — drag any supported file into an editor and the import lands on its own line at the drop point, no keyboard required
• Multi-file import in one gesture — drag or copy several files at once; every file gets its own statement in one stacked block, placeholders kept independent
• 45 configurable import styles — ES modules, CommonJS, dynamic import(), @use, @forward, @import, HTML tags, Markdown syntax, LaTeX figure / \includegraphics / \input / \addbibresource
• 38 source extensions — scripts, stylesheets, images, fonts, video, audio, text tracks, data, documents, components, LaTeX graphics (plus extensionless files like LICENSE into Markdown)
• Eight commands, three keystrokes — Copy, Paste, and Auto on the keyboard; Pick Style, Set Default Style, Set Import Placement, Toggle Preserve Script File Extension, and Reset All Import Styles from the Command Palette
• ~12 KB gzipped, zero dependencies, no telemetry

Commands & Keybindings

All eight are searchable in the Command Palette (Cmd/Ctrl+Shift+P → Auto Import). The three keyboard shortcuts are rebindable from VS Code's keyboard shortcuts editor.

See SPEC — §Commands & Keybindings for command IDs, context clauses, and workflow details.

Drag-and-Drop

Drag a file from the Explorer into any supported editor. The import snippet is generated with the same styles and settings as the paste commands, and inserted on its own line at the drop point — never spliced into the middle of the line it lands on. No keybinding needed.

• Uses the same gating, snippet styles, and configuration as paste commands.
• Follows the same Top / Bottom / Cursor placement setting as paste commands — the drop line is used as the Cursor input, and the dropped import always takes its own line; in HTML, Markdown, and LaTeX it matches the target line's indentation and a drop onto a blank line reuses it (paste keeps your caret column there; a drop ignores the mouse column).
• Drag several files at once — every supported file becomes one statement in a single stacked block; same-file and unsupported members are skipped (an all-image drop into CSS inserts the first url() only, since inline values can't stack).
• Unsupported pairs show the same "Cannot import" warning as paste commands; the provider suppresses the drop, so nothing is inserted (no stray path text).
• See SPEC — §Drag-and-Drop Import for full behavior and differences from paste.

Supported Languages

The extension is destination-driven — the file open in your editor decides which sources it accepts.

LaTeX sources (.tex / .bib / .eps) import only into .tex, and extensionless files only into .md — the "All …" rows above exclude them.

See SPEC — §Supported File Extensions for the full 38-extension breakdown by category.

Rejection rules:

• Same file — a file cannot import itself (case-insensitive path comparison).
• Unsupported pair — source extension not in the destination's accepted list.
• .js and .ts accept their own extension plus framework components — .vue/.svelte/.astro sources import as a fixed PascalCase default (the test-and-setup-code path); every other cross-language source is rejected. Use .jsx or .tsx destinations for asset imports.
• Extensionless sources import only into .md — LICENSE/Dockerfile/Makefile link into Markdown; every other destination rejects them.

See SPEC: Rejection Rules · Cross-Import Compatibility

Import Styles

Every destination language has its own set of import shapes, most of them configurable — Script (JavaScript/TypeScript), Stylesheet (CSS/SCSS), HTML, Markdown, JSX/TSX/MDX, Vue/Svelte/Astro, and LaTeX. Each shape can be set as your default (Set Default Import Style) or picked per-paste (Paste as Import (Pick Style)).

See SPEC — §Import Statement Styles for all 45 styles with their defaults, and SPEC — §Snippet Placeholders for how name and _relativePath_ resolve.

Placement

Setting: auto-import.preferences.importStatementPlacement — default "Bottom"

Some destinations override this automatically: HTML / Markdown / LaTeX and images-into-stylesheets force Cursor; Astro constrains imports to the --- frontmatter, Vue/Svelte to the <script> block, and a stylesheet dropped in a <style> block lands there as an @import / @use.

See SPEC — §Placement for Bottom-mode import detection, every override, the framework block constraints, and insertion-column rules.

Configuration

All settings live under the auto-import namespace. Open VS Code Settings (Cmd/Ctrl+,) and search auto-import.

Preferences

Values for importStatementPlacement: Top, Bottom, Cursor. See Placement.

requestReview shows a single notification asking for a Marketplace review once you have generated a number of imports. It never repeats — answering or dismissing it retires the prompt permanently. Set it to false to suppress it entirely.

See SPEC — §Configuration Reference for every setting with all enum values.

Path Computation

Relative paths are computed from the destination's directory to the source, always forward-slashed (including on Windows), with a ./ prefix for ES-module compatibility. Script and stylesheet extensions are stripped by default (togglable); images, media, data, documents, and components keep theirs; LaTeX graphics keep theirs by default. Identifiers are auto-derived — SCSS partial _ stripping, Angular PascalCase, exported-class detection, and Vue/Svelte/Astro component PascalCase.

See SPEC — §Path Computation for the complete algorithm and every edge case.

Tips & Tricks

• Paste into many files. The clipboard keeps the path until you copy something else. Copy once with Cmd/Ctrl+Shift+A, then Cmd/Ctrl+I in every destination.
• Snippet placeholders. After insertion, your cursor lands on the identifier — type the name and Tab to the next stop. No need to click or arrow around.
• CSS Modules are detected automatically. Files named *.module.css or *.module.scss imported into JSX/TSX/MDX produce import styles from '...' instead of a side-effect import '...'.
• Same-directory imports always get ./. You'll never see a bare Button — it's always ./Button, which ES modules and bundlers require.
• Drag from Explorer for zero-keystroke imports. Drag a file from the sidebar directly into your editor — the import lands on its own line at the drop point with the same style as paste. Great for quickly pulling in components or assets without touching the keyboard.
• Mixing CSS into SCSS just works. The .css extension is preserved even when preserveStylesheetFileExtension is off, because Sass needs it.
• HTML, Markdown, and LaTeX ignore your placement setting. Insertion is always at the cursor for these languages (for LaTeX, in the document body — never the preamble). Leave importStatementPlacement set to Bottom for scripts — it won't affect your markup.
• Rebind anything. auto-import.copyFilePath, auto-import.pasteImport, and auto-import.copyPaste are rebindable from VS Code's keyboard shortcuts editor. The five Command Palette–only commands can be given keybindings from the same editor.

Installation

Requires VS Code 1.97.0 or later.

• Marketplace: Extensions view (Cmd/Ctrl+Shift+X) → search Auto Import Relative Path by WinterNova5 → Install.
• CLI: code --install-extension ElecTreeFrying.auto-import
• Direct: VS Code Marketplace listing
• Direct (Open VSX): Open VSX listing
• Cursor / Windsurf / VSCodium / Gitpod: Search Auto Import Relative Path in the Extensions panel — served via Open VSX.

Compatibility

• VS Code: 1.97.0 or later.
• Registries: Available on both the VS Code Marketplace and Open VSX — published by WinterNova5, a verified Open VSX publisher.
• Compatible hosts: Cursor, Windsurf, VSCodium, Gitpod, Code Server, and other forks that implement the VS Code API at the same engine version — installable directly from their Extensions panel via Open VSX.
• Display language: Command titles and every setting follow VS Code's display language — Simplified Chinese, Spanish, French, Brazilian Portuguese, Russian, German, Japanese, and Turkish, with English as the fallback. The Auto Import prefix stays verbatim in every language, so one palette search still finds the full command set.
• Platforms: macOS, Windows, Linux. Paths are normalized to forward slashes on all platforms.
• Footprint: ~12 KB gzipped (~44 KB minified). Zero runtime dependencies.
• Telemetry: None. Everything runs locally.

Troubleshooting

If a keybinding does nothing, an import looks wrong, or you see an unexpected warning — see SUPPORT.md for symptom → cause → fix.

See SPEC — §Notification Reference for a complete list of all warning and info messages.

Still stuck? Please open an issue on GitHub Issues.

Changelog

See CHANGELOG.md for full release notes.

Roadmap

Planned and in-progress work is tracked in ROADMAP.md.

Contributing

Contributions, bug reports, and feature requests are welcome in GitHub Issues. See SUPPORT.md for build/test commands and the architecture overview.

See SPEC.md for the full behavior contract — behavior changes belong there too.

Support

This extension is free and always will be. If it's become part of your workflow, here are a few ways to give back:

• Sponsor on GitHub Sponsors — one-time or monthly
• Star the repo on GitHub
• Leave a review on the VS Code Marketplace
• Send a donation to any address below

Related

• All extensions by WinterNova5 on the VS Code Marketplace — and on Open VSX.

License

MIT