Drag And Drop Import Relative Path

Never type an import path again.

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

Drag a file from the Explorer into your editor — the right import lands where you drop it. Path, syntax, and placement handled automatically.

Quick Start

1. Install the extension (see below).
2. Drag a file — or a whole multi-selection — from the Explorer into an open editor.
3. Drop it — the imports land on their own lines at the drop point, one per file.
4. Your cursor is on the identifier — name it and Tab out.

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

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)
• 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
• 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
• Multi-file import in one gesture — drag 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)
• Four Command Palette commands — Set Default Import Style, Set Import Placement, Toggle Preserve Script File Extension, and Reset All Import Styles to Defaults
• ~12 KB gzipped, zero dependencies, no telemetry

Commands

All four commands live in the Command Palette (Cmd/Ctrl+Shift+P → Drag Import).

Drag-and-Drop

Drag a file from the Explorer into any supported editor. The import snippet is generated with your configured styles and placement setting, and inserted on its own line at the drop point — never spliced into the middle of the line it lands on. No keyboard needed.

• Follows your Top / Bottom / Cursor placement setting — 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 (the mouse column is ignored).
• 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 a "Cannot import" warning; the provider suppresses the drop, so nothing is inserted — no stray path text.

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.

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

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 with Drag Import: Set Default Import Style.

Placement

Setting: drag-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.

Configuration

All settings live under the drag-import namespace. Open VS Code Settings (Cmd/Ctrl+,) and search drag-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.

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.

Tips & Tricks

• 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 dropped 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. 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 drop point 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.

Installation

Requires VS Code 1.97.0 or later.

• Marketplace: Extensions view (Cmd/Ctrl+Shift+X) → search Drag And Drop Import Relative Path by ElecTreeFrying → Install.
• CLI: code --install-extension ElecTreeFrying.drag-import-relative-path
• Direct: VS Code Marketplace listing
• Cursor / Windsurf / VSCodium / Gitpod: Search Drag And Drop 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.
• 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.
• 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 drop 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.

Contributing

Contributions, bug reports, and feature requests are welcome in GitHub Issues. See SUPPORT.md for build 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:

• Star the repo on GitHub
• Leave a review on the VS Code Marketplace
• Send a donation to any address below

Related

• All extensions by ElecTreeFrying on the VS Code Marketplace.

License

MIT