Skip to content
| Marketplace
Sign in
Visual Studio Code>Snippets>Drag And Drop Import Relative PathNew to Visual Studio Code? Get it now.
Drag And Drop Import Relative Path

Drag And Drop Import Relative Path

ElecTreeFrying

|
36,382 installs
| (2) | Free
This extension improves developer productivity by allowing drag-and-drop file imports.
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

Drag And Drop Import Relative Path (vscode extension)

Version Badge Downloads Badge

This extension helps developers to quickly and easily import files by dragging them from the tree view to their active text editor. The extension simplifies the workflow, allowing developers to save time and improve their productivity by eliminating the need to type long and tedious import statements and file paths.

typescript-demo html-demo markdown-demo

Click here for more usage examples

Supported file extensions

File extension
Programming Language .js, .jsx, .ts, .tsx
Markup Language .html, .md
Stylesheet .css, .scss

Usage

  1. Drag supported files from the tree view.
  2. Hold shift
  3. Drop them into any of your active editors.
Active text editor
Drop (to)
Supported file extensions
Drag (from)
.html .js, .css, .gif, .jpeg, .jpg, .png, .webp
.md self, .gif, .jpeg, .jpg, .png, .webp
.js, .ts self
.jsx self, .js, .json
.css,.sass .scss
.png, .jpg, .gif, .svg, .webp
.woff, .woff2, .ttf, .eot
.md, .yml, .yaml, .html
.tsx self, .ts, .js, .json
.css, .sass .scss
.png, .jpg, .gif, .svg, .webp
.woff, .woff2, .ttf, .eot
.md, .yml, .yaml, .html
.css self, .gif, .jpeg, .jpg, .png, .webp
.scss self, .css, .gif, .jpeg, .jpg, .png, .webp

More usage examples

  • Click here

Extension Settings

Import statements

Scripts: Javascript, React Javascript, Typescript, React Typescript

  • importStatements.script.preserveFileExtension: (Boolean) default → false

  • importStatements.script.javascriptImportStyle

    • import $1 from '_relativePath_'; → default
    • import { $1 } from '_relativePath_';
    • import { $1 as $2 } from '_relativePath_';
    • import * as $1 from '_relativePath_';
    • import '_relativePath_';
    • var $1 = require('_relativePath_');
    • const $1 = require('_relativePath_');
    • var $1 = import('_relativePath_');
    • const $1 = import('_relativePath_');
  • importStatements.script.typescriptImportStyle

    • import $1 from '_relativePath_';
    • import { $1 } from '_relativePath_'; → default
    • import { $1 as $2 } from '_relativePath_';
    • import * as $1 from '_relativePath_';
    • import '_relativePath_';

Stylesheets: CSS, SCSS

  • importStatements.styleSheet.preserveFileExtension: (Boolean) default → false

  • importStatements.styleSheet.cssImportStyle

    • @import '_relativePath_'; → default
    • @import url('_relativePath_');
  • importStatements.styleSheet.cssImageImportStyle

    • url('_relativePath_') → default
  • importStatements.styleSheet.scssImportStyle

    • @import '_relativePath_'; → default
    • @import url('_relativePath_');
    • @use '_relativePath_';
    • @use '_relativePath_' as *;
  • importStatements.styleSheet.scssImageImportStyle

    • url('_relativePath_')'; → default

Markup: HTML, Markdown

  • importStatements.markup.htmlScriptImportStyle

    • <script type="text/javascript" src="_relativePath_"></script> → default
  • importStatements.markup.htmlImageImportStyle

    • <img src="https://github.com/ElecTreeFrying/drag-import-relative-path/raw/HEAD/_relativePath_" alt="sample"> → default
  • importStatements.markup.htmlStyleSheetImportStyle

    • <link href="_relativePath_" rel="stylesheet"> → default
  • importStatements.markup.markdownImportStyle

    • ![text](https://github.com/ElecTreeFrying/drag-import-relative-path/raw/HEAD/_relativePath_) → default
  • importStatements.markup.markdownImageImportStyle

    • ![alt-text](https://github.com/ElecTreeFrying/drag-import-relative-path/raw/HEAD/_relativePath_ "Hover text") → default
    • ![alt-text][image] / [image]: _relativePath_ "Hover text"

Installation

  1. Install VS Code v1.70.0 or higher
  2. Launch Visual Studio Code
  3. Enter command Ctrl+Shift+P (Windows, Linux) or Cmd+Shift+P (OSX)
  4. Select → Extensions: Install Extensions.
  5. Choose Drag And Drop Import Relative Path by ElecTreeFrying
  6. Reload Visual Studio Code

Changelog

See CHANGELOG for more information.

Contributing

  • You can submit bug reports and feature requests in GitHub Issues.
  • Leave a review on Visual Studio Marketplace.

Related

More extensions of mine

  • Visual Studio Code
  • Atom

License

MIT

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft